如何在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
相关产品推荐
相关产品推荐

