Chart.js yAxes Ticks stepSize 不起作用(小提琴)

2022-01-22 00:00:00 javascript chart.js

我已经为 yAxis 创建了一个带有这些选项的折线图:

yAxes: [{滴答声:{精度:1,步长:18.1,分钟:148.5,最大值:220.9}}]

因此,我希望 yAxis 可以这样缩放:

220.9202.8184.7166.6148.5

但是,当我提供此代码时,我正在获取此数据.

请看这个小提琴的例子:


另一种方法是使用 suggestedMinsuggestedMax 而不是 minmax,这允许 Chart.js计算自己的minmax:

在你的情况下,你只需要申请:

yAxes: [{滴答声:{maxTicksLimit: 5,建议Min: 148.5,建议最大值:220.9,步长:18.1,},}]

I have created a line chart with these options for the yAxis:

yAxes: [{
    ticks: {
        precision: 1,
        stepSize: 18.1,
        min: 148.5,
        max: 220.9
    }
}]

I would like, therefore, the yAxis scales to be like this:

220.9
202.8
184.7
166.6
148.5

However, when I provide this code, I am getting this data.

Please see this fiddle for an example: https://jsfiddle.net/wxLzdrcm/

How can I make the yAxis ticks add up like I have described?

解决方案

This question was asked at least twice (1, 2).

The solution is to use min and max values so that stepSize is a factor of max - min, allowing the chart to actually use the specified stepSize:

yAxes: [{
  ticks: {
    maxTicksLimit: 5,
    min: 144.8, // 18.1 * 8
    max: 235.3, // 18.1 * 13
    stepSize: 18.1,
  },
}]


An alternative would be using suggestedMin and suggestedMax rather than min and max, which allows Chart.js to calculate its own min and max:

In your case, you just need to apply:

yAxes: [{
  ticks: {
    maxTicksLimit: 5,
    suggestedMin: 148.5,
    suggestedMax: 220.9,
    stepSize: 18.1,
  },
}]

相关文章