如何使用chartjs-plugin-annotation在图表上创建一条线 [英] How to create a line on a chart using chartjs-plugin-annotation

问题描述

我正在使用angular，Chartjs和ng2-chart在我的项目上创建图表。
我正在尝试按照

这是我的代码：

  public lineVistaChartOptions：any = {
响应：true，
批注：{
 
 drawTime：'afterDatasetsDraw'，//（默认）
 
 
事件：['click']，
 
 
 dblClickSpeed：350，// ms（默认）
注释：{
类型：'line'，
 
 
 drawTime：'afterDatasetsDraw'，
 
 
 id：'a-line-1'，
 
 
模式：'horizo​​ntal'，
 
 //要绑定到
的秤的ID scaleID：'y-axis-0'，
 
 
值：50，
 
 
最终值：100，
 
 
 borderColor：'red'，
 
 
边界W idth：2，
 
 
 borderDash：[2，2]，
 
 
 borderDashOffset：1，
 
标签： {
 
 backgroundColor：'rgba（0,0,0,0.8）'，
 
 
 fontFamily： sans-serif，
 
 
字体大小：12，
 
 
字体样式： bold，
 
 
 fontColor： #fff，
 
 
 xPadding：0，
 
 
 yPadding：0，
 
 
 cornerRadius：6，
 
 
位置：中心，
 
 
 xAdjust：0，
 
 
 
 yAdjust：0，
 
 
启用：true，
 
 
内容：测试标签 
} 
 
 
 } 
} 
  

};

与文档完全相同。

解决方案

您实际上不需要设置/使用所有属性。仅设置满足您要求的那些。因此，设置以下属性应该足以绘制该水平线：

 注释：{
注释：[{ 
类型：'line'，
 id：'hLine'，
模式：'horizo​​ntal'，
 scaleID：'y-axis-0'，
 value： 3，//绘制线条的数据值
 borderWidth：2，
 borderColor：'black'
}] 
} 
  

也请注意， 注释 属性为不是只是一个对象，而是一个对象的数组。

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.

解决方案

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).

这篇关于如何使用chartjs-plugin-annotation在图表上创建一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！