You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在ChartJS中配置Y轴:按最大值百分比生成刻度

解决ChartJS Y轴按最大值百分比显示刻度的问题

直接按以下方式配置ticks里的参数就能实现需求:

  • 将max设为你已经获取到的maxAmount,让Y轴上限与数据最大值对齐
  • 将stepSize设为maxAmount / 4,这样就能把0到最大值的区间平均分成4段,刚好对应25%、50%、75%、100%的刻度值

完整配置代码如下:

yAxes: [
  {
    ticks: {
      min: 0,
      max: maxAmount, // 直接使用获取到的最大值
      beginAtZero: true,
      stepSize: maxAmount / 4, // 最大值除以4得到每段间隔
      callback(value) {
        return `Php ${formatHelper.kFormatter(value)}`;
      },
    },
  },
],

额外提醒:如果存在maxAmount为0的情况,可以加个简单判断避免除以0错误,比如stepSize: maxAmount ? maxAmount / 4 : 1,保证配置不会报错。

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.30 03:07:07