如何在Chart.js上更改X轴间隔

rkue9o1l 于 2022-11-23 发布在 Chart.js

关注(0)|答案(2)|浏览(248)

我在Chart.js上有一个折线图，正在尝试编辑x轴和y轴上的间隔。
我的y轴间隔按预期运行，但x轴间隔不正常。
我尝试了以下代码

let myChart = new Chart(inputChart, {
    type: 'line',
    data: {
          labels: [1,2,....,360] // list of values from python script
          data: [360 random numbers here] 
    }
    options: {
        scales: {
            yAxes: [{
                id:'main-axis',
                ticks: {
                     stepSize: 40 // this worked as expected
                        }
                   }],
            xAxes: [{
                id: 'main-x-axis',
                ticks: {
                    stepSize: 30 // this did not work as expected
                }
            }]
        }
    }
})

对于360个数据点，我基本上只想看到12个间隔（以30为增量），但我看到的是以4为增量的90个间隔。我是否只是使用了错误的stepSize属性？如果是，正确的属性是什么？

chart.js

来源：https://stackoverflow.com/questions/53523600/how-to-change-x-axis-interval-on-chart-js

2条答案

按热度按时间

mkshixfv1#

它可以使用xAxes的maxTicksLimit选项来完成，请参阅此工作小提琴-〉http://jsfiddle.net/Lzo5g01n/3/

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]

赞(0）回复(0）举报 2022-11-23

vptzau2j2#

对于Chart.js 3.3.2，您可以使用@Kunal Khivensara的方法，但需要做一些修改。您可以查看文档。将ticks放在xAxis中，将scales放在xAxis中。示例：

...
options: {
    scales: {
        xAxis: {
            ticks: {
                maxTicksLimit: 10
            }
        }
    }
}
...

赞(0）回复(0）举报 2022-11-23

我来回答

如何在Chart.js上更改X轴间隔

2条答案

相关问题

热门标签

最新问答