javascript - chart.js-plugin-annotations 一张图表中的多条水平线

Question

我正在使用 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 行。

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
      }
   }]
}