[英]ChartJS dynamic label
我正在尝试根据从数据库返回的点数将 label 动态添加到我的折线图中。 我有一个表格,一旦用户单击特定行,就会更新图表。 点数可以变化。 即图表 1 有 2 个点,图表 2 有 5 个点。 我需要计算点数并按序号顺序显示底部的label。 即图表 1 的 0, 1 和图表 2 的 0, 1, 2, 3, 4。下图显示了我想要避免发生的事情。 2、3 和 4 不应显示在图表 1 中,而应显示在图表 2 中。
我已经为此示例 [0, 1, 2, 3, 4] 硬编码了 label 数据。 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,
},
],
}}
您可以定义一个xAxes.ticks.callback
function。 当对应的data
值存在时,它应该返回label
,否则返回null
。
xAxes: [{
ticks: {
callback: (v, i) => i + 1 <= trainingData.length ? v : null
}
}]
请看一下下面的可运行代码,看看它是如何工作的。
const trainingData = [0.68, 0.9]; const validationData = [0.57, 0.97]; new Chart('line-chart', { type: 'line', data: { labels: [0, 1, 2, 3, 4], datasets: [{ label: 'Training', data: trainingData, fill: false, borderColor: 'rgb(0, 119, 182)', backgroundColor: 'rgb(0, 119, 182)', lineTension: 0, }, { label: 'Validation', data: validationData, fill: false, borderColor: 'rgb(0, 180, 216)', backgroundColor: 'rgb(0, 180, 216)', lineTension: 0, } ] }, options: { scales: { yAxes: [{ ticks: { min: 0, max: 1 } }], xAxes: [{ ticks: { callback: (v, i) => i + 1 <= trainingData.length? v: null } }] } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <canvas id="line-chart" height="90"></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.