带有 Chart.js 的折线图网格上自定义水平线 Y 轴标记的插件

【问题标题】：Plugin for custom horizontal line Y-axis marker on grid of a Line chart with Chart.js带有 Chart.js 的折线图网格上自定义水平线 Y 轴标记的插件
【发布时间】：2019-02-03 23:22:47
【问题描述】：

我需要在 Chart.js 折线图的 Y 轴上创建“上”和“下”标记。我似乎无法找到一种开箱即用的方式来做到这一点。任何人都可以帮助我如何编写一个插件来实现这样的事情？（参见沿 70 和 50 Y 轴的水平红线。

【问题讨论】：

标签： javascript jquery jquery-plugins chart.js

【解决方案1】：

我在Chart.js GitHub root page 上发现了一个名为Chart.Annotations.js 的插件。这正是我所需要的！

您需要将以下属性添加到您的选项对象。为要绘制的每条线添加一个 annotations: 属性。就我而言，我有 2 个。

annotation: {
annotations: [{
    type:'line',
    mode:'horizontal',
    scaleID:'y-axis-1',
    value:'10',
    borderColor:'#000000',
    borderWidth:2
}]
}

看看我最终实现的截图：

【讨论】：