在v2上的chart.js中的图表上绘制水平线

您可以使用chart.js注释插件轻松地在图表上绘制线条,而不必手动处理画布中的渲染像素(旧方法会给您带来错误).请注意,该插件由chart.js与同一团队创建/支持,并在chart.js文档中提及.

这是一个示例代码库,演示如何在图表上创建一条线.

添加插件后,只需annotation在图表配置中设置属性即可.这是一个例子.

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January", "February"],
    datasets: [{
      label: 'Dataset 1',
      borderColor: window.chartColors.blue,
      borderWidth: 2,
      fill: false,
      data: [2, 10]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Draw Line On Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'horizontal',
        scaleID: 'y-axis-0',
        value: 5,
        borderColor: 'rgb(75, 192, 192)',
        borderWidth: 4,
        label: {
          enabled: false,
          content: 'Test label'
        }
      }]
    }
  }
});