chart.js-plugin-annotations一个图表中的多个水平线

时间:2017-07-05 12:30:46

标签: javascript annotations chart.js

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

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