如何更改 Chart.js 上的 X 轴间隔
How to change X-Axis Interval on Chart.js
我在 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 使用了错误的 属性 吗?如果是这样,正确的 属性 是什么?
可以使用 xAxes 的 maxTicksLimit
选项来完成,请参阅此工作 fiddle -> http://jsfiddle.net/Lzo5g01n/3/
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}]
对于 Chart.js 3.3.2,您可以使用@Kunal Khivensara 的方法进行一些更改。您可以检查documentation。将 ticks
放入 xAxis
中 scales
。示例:
...
options: {
scales: {
xAxis: {
ticks: {
maxTicksLimit: 10
}
}
}
}
...
我在 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 使用了错误的 属性 吗?如果是这样,正确的 属性 是什么?
可以使用 xAxes 的 maxTicksLimit
选项来完成,请参阅此工作 fiddle -> http://jsfiddle.net/Lzo5g01n/3/
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}]
对于 Chart.js 3.3.2,您可以使用@Kunal Khivensara 的方法进行一些更改。您可以检查documentation。将 ticks
放入 xAxis
中 scales
。示例:
...
options: {
scales: {
xAxis: {
ticks: {
maxTicksLimit: 10
}
}
}
}
...