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

【问题标题】：How to change X-Axis Interval on Chart.js如何在 Chart.js 上更改 X 轴间隔
【发布时间】：2018-11-28 16:05:47
【问题描述】：

我在 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 为增量），但我看到的是 90 个以 4 为增量的间隔。我只是为 stepSize 使用了错误的属性吗？如果有，正确的属性是什么？

【问题讨论】：

xAxis 值不会自动计算，无论我们在labels 属性中提供的任何值都绘制在那里。只需提供您想在 xAxis 中看到的值，stepSize 没有选项。
我试过这个，当我提供 12 个标签时，我只得到 12 个数据点，而丢失了其他 348 个数据点。有没有更好的处理方法？

标签： chart.js chartjs-2.6.0

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

对于 Chart.js 3.3.2，您可以使用 @Kunal Khivensara 的方法并进行一些更改。您可以查看documentation。将ticks 放入xAxis 放入scales。示例：

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

【讨论】：