首页 > 解决方案 > 如何使用 chart.js 在图表中设置固定或最小刻度限制?

问题描述

我有一个图表,使用chart.js,我看到有一个选项maxTicksLimit,但这还不够,因为我的数据X-Axis可以在 5 之间(所以在这种情况下,我需要 1 个步长的 5 个刻度),但可以达到最高作为 320,在这种情况下,我需要 5 或 8 个刻度,步长为 20 或 25。

有没有办法定义最小刻度数?对我来说理想的是:

minimum amount of ticks = 4
maximum amount of ticks = 8

因为如果我把maxTicksLimit: 5, 放在更大的数字上,它们将是 5,但如果我的 X 轴范围是 0-25,由于某种原因,我将只有 4 个刻度(0-10、10-15、15-20、20- 25)

由于我的 X 轴范围会根据输入进行动态更改,因此最好的解决方案是使用以下内容:

xAxes范围为:

0-5 -> 5 ticks with step 1

0-10 -> 5 ticks with step 2

0-15 -> 5 ticks with step 3

from 15 to 40, up to 8 ticks with step 5

from 40 to 80, up to 8 ticks with step 10

from 80 to 160, up to 8 ticks with step 20

from 160 to 240, up to 8 ticks with step 30

from 240 to 320, up to 8 ticks with step 40

这可能吗?

标签: javascriptangularchart.js

解决方案


推荐阅读