我正在尝试使用chart.js
配置图表。我面临的问题是,当我将ticks配置stepSize
设置为 X 刻度中的0.04时,我在控制台中收到一个警告:scales.x.ticks.stepSize:0.04将导致生成多达1027个滴答。限制为1000
在内部,LinearScaleBase
有一个名为getTickLimit
的函数,它将滴答数限制为1000。我尝试在配置中将maxTicksLimit
设置为更高的数字,但它不起作用。
有没有办法重写getTickLimit
函数?也许我缺少一些配置?每隔0.04显示一次刻度是很重要的,因为我试图显示信息。这是我的图表配置的一个片段:
const config: any = {
type: 'line',
data: {
datasets: [{
data: data.ecgData,
borderColor: 'rgb(0, 0, 0)',
borderWidth: 1,
radius: 0,
}
]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
type: 'linear',
position: 'bottom',
grid: {
display: true,
drawOnChartArea: true,
drawTicks: true,
},
ticks: {
display: true,
autoSkip: false,
maxTicksLimit: 5000,
stepSize: 0.04
}
},
y: {
grid: {
display: true,
drawOnChartArea: true,
drawTicks: true
},
ticks: {
// forces step size to be 50 units
stepSize: 0.2,
display: true,
maxTicksLimit: 3000,
autoSkip: false,
beginAtZero: true
}
}
}
}
};
先谢了。
1条答案
按热度按时间whlutmcx1#
我假设你正在使用chartjs 4,因为chartjs 3中的tick是在
options.scales.yAxes.ticks
属性中配置的,而不是options.scales.y.ticks
。在x轴上:
data.labels
作为报价的信息源。options.scales.x.ticks.autoSkip: false
来确保滴答不会减少在y轴上添加自己的刻度稍微复杂一些:
value
属性的对象,例如[{value:0},{value:0.2},{value:0.4}]。options.scales.y.afterBuildTicks
并重新分配axis.ticks
options.scales.y.callback
来检查你确实有> 1,000个tick,并登录控制台(tick.length)代码示例
这里有一个CodeSandbox example