图表.js插件注释在一个图表中多条水平线

Question

我正在使用chart.js 2.6和chart.js插件注释0.5.5来创建图形。

我需要在同一图形上使用注释添加 3 条水平线，但只绘制列表中的最后一条。如果我切换注释的位置，仍然会绘制最后一个注释，因此每个注释的代码似乎都可以工作，但只有最后一个显示。

annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [{
id: 'hline1',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: speedAverage,
borderColor: 'green',
borderWidth: 1
}],
annotations: [{
id: 'hline3',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: speedToleranceMin,
borderColor: 'red',
borderWidth: 1,
label: {
backgroundColor: "red",
content: "Min Value",
enabled: true
}
}],
annotations: [{
id: 'hline2',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: speedToleranceMax,
borderColor: 'red',
borderWidth: 1,
label: {
backgroundColor: "red",
content: "Max Value",
enabled: true
}
}]
}

这是怎么回事？ 预期结果是看到所有 3 行，而不仅仅是其中的 1 行。

Answer 1

您错误地使用了该插件。正确的方法应该是...

annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [{
id: 'hline1',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: speedAverage,
borderColor: 'green',
borderWidth: 1
}, {
id: 'hline3',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: speedToleranceMin,
borderColor: 'red',
borderWidth: 1,
label: {
backgroundColor: "red",
content: "Min Value",
enabled: true
}
}, {
id: 'hline2',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: speedToleranceMax,
borderColor: 'red',
borderWidth: 1,
label: {
backgroundColor: "red",
content: "Max Value",
enabled: true
}
}]
}