我使用chart.js 2.6和chart.js-plugin-annotations 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行。
答案 0 :(得分: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
}
}]
}