You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

ChartJS y轴刻度配置求助:如何设置0-100、步长25的y轴?

解决ChartJS Y轴刻度配置(0-100,步长25)的问题

嘿,太懂你找靠谱资料的痛苦了——ChartJS版本更新快,旧文档很容易误导人!你现在用的stepsstepValue属性早就被废弃了,这就是为啥你的配置达不到预期效果。

正确配置方式(ChartJS v2版本适用)

直接用ticks里的minmaxstepSize这三个属性就能搞定,替换掉你原来的过时参数:

yAxes: [
  {
    ticks: {
      min: 0,          // 设定Y轴最小值为0
      max: 100,        // 设定Y轴最大值为100
      stepSize: 25,    // 设定刻度步长为25
      beginAtZero: true // 其实可以不用,因为已经指定了min:0,不过保留也不影响
    }
  }
]

如果是ChartJS v3及以上版本

注意v3之后配置结构做了扁平化调整,不再有yAxes数组,直接在scales下配置y轴:

scales: {
  y: {
    min: 0,
    max: 100,
    ticks: {
      stepSize: 25
    }
  }
}

这样设置后,Y轴就会精准显示0、25、50、75、100这几个刻度,完全符合你的需求啦!

内容的提问来源于stack exchange,提问作者SNYDERHAUS

火山引擎 最新活动