如何使用 chartjs 中的 y 轴值进行操作

Question

大家好，

如何控制 Chart.js 库中的 Y 轴值？尽管每个图表的代码相同，但每个图表中的数据显示不同。

第一个图表中的数据是这样的

而第二张图表的数据是这样的

我怎样才能使每个图表的值都为 +5，例如 5、10、20、25，因为我从来没有 float 类型的值。

代码如下所示：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: data.map(x => moment(x.date).format("MMM Do")),
        datasets: [{
            data: data.map(x => x.premium),
            backgroundColor: '#ffec87',
            borderColor: "#ffec87",
            borderWidth: 2,
            borderStyle: 'dotted'
        }]
    },
  options: {
    scales: {
      xAxis: { grid: { display: false } },
      yAxis: { grid: { borderDash: [3, 5] } }
    }
  }
});

非常感谢。

Answer 1

在options scales, y Axis增加步长

options: {
 scales: {
   xAxis: { grid: { display: false } },
   yAxis: { 
     grid: { borderDash: [3, 5] },
     ticks: {stepSize: 5}
   }
 }
}

Answer 2

或者，您可以设置 y 轴刻度的 min/max，如本例所示

https://www.chartjs.org/docs/latest/samples/scales/linear-min-max.html

scales: {
      y: {
        min: 0,
        max: 25,
      }
    }

我刚刚在文档中找到了讨论 Amin 解决方案的地方，我想为了方便起见我应该在这里放一个参考。

https://www.chartjs.org/docs/latest/samples/scales/linear-step-size.html

y: {
        title: {
          display: true,
          text: 'Value'
        },
        min: 0,
        max: 100,
        ticks: {
          // forces step size to be 50 units
          stepSize: 5
        }
   }

如何使用 chartjs 中的 y 轴值进行操作

how to manipulate with the y-axis values in chartjs

javascript

chart.js