How to create a line on a chart using chartjs-plugin-annotation

问题

I'm using angular, Chartjs and ng2-charts to create charts on my project. I'm trying to make middle line following the instructions provided on the GitHub repository. The problem is that when I add this code, it "undisplays" (I'm not sure this is an english word) the chart.Here's what I want to reproduce :

Here's my code:

public lineVistaChartOptions:any = {
    responsive: true,
    annotation:{

  drawTime: 'afterDatasetsDraw', // (default)


  events: ['click'],


  dblClickSpeed: 350, // ms (default)
  annotations: {
    type: 'line',


    drawTime: 'afterDatasetsDraw',


    id: 'a-line-1',


    mode: 'horizontal',

    // ID of the scale to bind onto
    scaleID: 'y-axis-0',


    value: 50,


    endValue: 100,


    borderColor: 'red',


    borderWidth: 2,


    borderDash: [2, 2],


    borderDashOffset: 1,

    label: {

      backgroundColor: 'rgba(0,0,0,0.8)',


      fontFamily: "sans-serif",


      fontSize: 12,


      fontStyle: "bold",


      fontColor: "#fff",


      xPadding: 0,


      yPadding: 0,


      cornerRadius: 6,


      position: "center",


      xAdjust: 0,



      yAdjust: 0,


      enabled: true,


      content: "Test label"
    }


  }
}

};

Which is the exact same as the documentation.

回答1:

You don't actually need to set/use all the properties. Only set those which are needed to fulfill your requirement. So, setting the following properties should be enough to draw that horizontal line :

annotation: {
   annotations: [{
      type: 'line',
      id: 'hLine',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 3,  // data-value at which the line is drawn
      borderWidth: 2,
      borderColor: 'black'
   }]
}

also, note that annotations property is not just an object, it's an array of object(s).

来源：https://stackoverflow.com/questions/46366388/how-to-create-a-line-on-a-chart-using-chartjs-plugin-annotation

标签

angular

chart.js

ng2-charts