如何在chart.js中缩放横轴标签Version 4.4.0

kknvjkwl  于 2023-11-18  发布在  Chart.js
关注(0)|答案(1)|浏览(158)

我有数据应该表示折线图中的数据,其中X轴表示以毫秒为单位的时间。然而,标签是十进制值,我想将其可视化为步长为10的整数。
我试着输入(options.scales[x].ticks.stepsize:10),但是没有用。
谁能帮帮我,我被卡住了。
我想我的图表显示x轴为[0,10,20,30,.100]与所有数据对应的y轴落在这个范围内。
以下是用折线图表示的数据

var ImpData = {
            type: 'line',
            data: {
                labels: [0.0001,2.5,5.0001,7.5,12.5,15.0001,17.5,20.0001,22.5,25.0001,27.5,30.0001,32.5,35.0001,37.5,40.0001,42.5,45.0001,47.5,50.0001,52.5,55.0001,57.5,60.0001,62.5,65.0001,67.5,70.0001,72.5,75.0001,77.5,80.0001,82.5,85.0001,87.5,90.0001,92.5,95.0001,97.5],
                datasets: [
                    {
                        label: 'ix',
                        data: [-7.0200000000000005,-7.0200000000000005,-6.24,-6.24,-5.46,-4.68,-4.68,-3.9000000000000004,-3.9000000000000004,-3.9000000000000004,-3.9000000000000004,-3.12,-2.34,39.0001,-3.12,31.98,44.46,28.080000000000002,10.92,3.12,-3.12,-7.800000000000001,-10.14,-9.36,-7.800000000000001,-6.24,-4.68,-2.34,0.0001,0.78,2.34,2.34,1.56,0.78,0.0001,-0.78,-7.800000000000001,-7.800000000000001,-7.800000000000001],
                        backgroundColor: 'rgba(168, 218, 220, 0.5)',
                        borderColor: 'rgba(168, 218, 220, 0.5)',
                        yAxisID: 'y1'
                    }
                ]
            },
            options: {
                plugins:{
                    title:{
                        display: true,
                        text: 'Impact (g)',
                        color: 'black',
                        font:{
                            size: '16px',
                            weight: 'bold'
                        }
                    },
                    legend: {
                        labels:{
                            color: 'black'
                        }
                    },
                    tooltips: {
                        mode: 'nearest',
                        intersect: false
                    }
                },
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'TIME',
                            align: 'center',
                            color: 'black',
                            font:{
                                size: '18px',
                                weight: 'bold'
                            }
                        },
                        ticks: {
                            color: 'black',
                            min: 0,
                            max: 100,
                            stepSize: 10,
                            font: {
                                size: '18px',
                                weight: 'bold'
                            }
                        }
                    },
                    y1: {
                        title: {
                            display: true,
                            text: 'Acceleration',
                            align: 'center',
                            color: 'black',
                            font:{
                                size: '18px',
                                weight: 'bold'
                            }
                        },
                        ticks: {
                            color: 'black',
                            font: {
                                size: '18px',
                                weight: 'bold'
                            }
                        }
                    }
                }    
            }
        };

字符串

9jyewag0

9jyewag01#

您还应该将x轴的type声明为linearchart.js的一个有点奇怪的特性是,轴类型(如果未指定)是图表类型的默认值。由于您的图表类型是line,因此indexAxis(即x)的类型为category
我们可以在图表类型scatter上读到,它几乎与line相同,除了默认属性和索引线是linear类型的事实。
散点图支持与折线图相同的所有属性。默认情况下,散点图将折线图的showLine属性重写为false。[...]
指数刻度是线性类型。
因此,一个解决方案是将图表的类型更改为scatter;然而,这需要您也使用点和线选项。在任何情况下,scatter类型似乎是为您所拥有的科学类型的图表而设计的。
同样,最简单的解决方案是jsut将轴类型声明为linear

var ImpData = {
    type: 'line',
    data: {
        labels: [0.0001,2.5,5.0001,7.5,12.5,15.0001,17.5,20.0001,22.5,25.0001,27.5,30.0001,32.5,35.0001,37.5,40.0001,42.5,45.0001,47.5,50.0001,52.5,55.0001,57.5,60.0001,62.5,65.0001,67.5,70.0001,72.5,75.0001,77.5,80.0001,82.5,85.0001,87.5,90.0001,92.5,95.0001,97.5],
        datasets: [
            {
                label: 'ix',
                data: [-7.0200000000000005,-7.0200000000000005,-6.24,-6.24,-5.46,-4.68,-4.68,-3.9000000000000004,-3.9000000000000004,-3.9000000000000004,-3.9000000000000004,-3.12,-2.34,39.0001,-3.12,31.98,44.46,28.080000000000002,10.92,3.12,-3.12,-7.800000000000001,-10.14,-9.36,-7.800000000000001,-6.24,-4.68,-2.34,0.0001,0.78,2.34,2.34,1.56,0.78,0.0001,-0.78,-7.800000000000001,-7.800000000000001,-7.800000000000001],
                backgroundColor: 'rgba(168, 218, 220, 0.5)',
                borderColor: 'rgba(168, 218, 220, 0.5)',
                yAxisID: 'y1'
            }
        ]
    },
    options: {
        plugins:{
            title:{
                display: true,
                text: 'Impact (g)',
                color: 'black',
                font:{
                    size: '16px',
                    weight: 'bold'
                }
            },
            legend: {
                labels:{
                    color: 'black'
                }
            },
            tooltips: {
                mode: 'nearest',
                intersect: false
            }
        },
        scales: {
            x: {
                type: 'linear',
                title: {
                    display: true,
                    text: 'TIME',
                    align: 'center',
                    color: 'black',
                    font:{
                        size: '18px',
                        weight: 'bold'
                    }
                },
                ticks: {
                    color: 'black',
                    min: 0,
                    max: 100,
                    stepSize: 10,
                    font: {
                        size: '18px',
                        weight: 'bold'
                    }
                }
            },
            y1: {
                title: {
                    display: true,
                    text: 'Acceleration',
                    align: 'center',
                    color: 'black',
                    font:{
                        size: '18px',
                        weight: 'bold'
                    }
                },
                ticks: {
                    color: 'black',
                    font: {
                        size: '18px',
                        weight: 'bold'
                    }
                }
            }
        }
    }
};
new Chart('myChart', ImpData);

个字符

相关问题