我正在尝试根据从数据库返回的点数向折线图动态添加标签。我有一个表格,一旦用户单击特定行,就会更新图表。点数可以变化。即图表 1 有 2 个点,图表 2 有 5 个点。我需要计算点数并按顺序显示底部标签。即图表 1 为 0, 1,图表 2 为 0, 1, 2, 3, 4。下图显示了我想要避免发生的情况。 2、3、4不应该出现在图1中,而是出现在图2中。
我已经对这个例子的标签数据进行了硬编码 [0, 1, 2, 3, 4]。 xAxisValue.length 带回每个图表显示的点数。感谢您的帮助。
data={{
labels: [0, 1, 2, 3, 4],
datasets: [
{
label: 'Training',
data: yAxisValue,
fill: false,
borderColor: 'rgb(0, 119, 182)',
backgroundColor: 'rgb(0, 119, 182)',
lineTension: 0,
},
{
label: 'Validation',
data: xAxisValue,
fill: false,
borderColor: 'rgb(0, 180, 216)',
backgroundColor: 'rgb(0, 180, 216)',
lineTension: 0,
},
],
}}
答案 0 :(得分:0)
您可以定义一个 xAxes.ticks.callback
函数。当相应的 0xa...
值存在时,它应该返回 0x4...
,否则返回 label
。
data
请看下面的可运行代码,看看它是如何工作的。
null
xAxes: [{
ticks: {
callback: (v, i) => i + 1 <= trainingData.length ? v : null
}
}]