chart.js-plugin-annotations mehrere horizontale Linien in einem Diagramm

Question

Ich benutze chart.js 2.6 und chart.js-plugin-annotations 0.5.5 um ein Diagramm zu erstellen.

Ich muss 3 horizontale Linien mit Anmerkungen auf dem gleichen Diagramm hinzufügen, aber nur das letzte in der Liste wird gezeichnet. Wenn ich die Platzierung der Annotationen ändere, wird die letzte noch gezeichnet, so dass der Code für jede Annotation funktioniert, aber nur die letzte Annotation.

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

was ist hier falsch? Das erwartete Ergebnis ist, dass alle 3 Zeilen nicht nur 1 sind.

Answer 1

Sie verwenden das Plugin falsch. Richtiger Weg sollte sein ...

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