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

Question

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

Answer 1

我找到了一个名为 Chart.Annotations.js on the Chart.js GitHub root page 的插件。这正是我所需要的！

您需要将以下属性添加到选项对象中。添加一个 annotations: 属性每行你想画。就我而言，我有 2.

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

看看我最终实现的截图：

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

Plugin for custom horizontal line Y-axis marker on grid of a Line chart with Chart.js

javascript

jquery

jquery-plugins

chart.js