chart.js-plugin-annotations複数の水平線を1つのグラフに表示

Question

私はgraph.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 
         } 
      }] 
    } 

ここで何が間違っていますか？ 期待される結果は、それらのうちの1つだけでなく、3つの行すべてを見ることです。

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