将水平线添加到我的 chart.js 条形图答案

【问题标题】：Add horizontal Line to my chart.js Barchart将水平线添加到我的 chart.js 条形图
【发布时间】：2017-02-28 18:45:54
【问题描述】：

您好，我想在我的条形图中添加一条水平线。这是我图表的代码：

var singleBarOptions = {
    scaleBeginAtZero: true,
    scaleShowGridLines: true,
    scaleGridLineColor: "rgba(0,0,0,.05)",
    scaleGridLineWidth: 1,
    barShowStroke: true,
    barStrokeWidth: 1,
    barValueSpacing: 5,
    barDatasetSpacing: 1,
    responsive: true
};

var singleBarData = {
    labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],

    datasets: [
        {
            label: "My Second dataset",
            fillColor: "rgba(0,191,255,0.5)",
            strokeColor: "rgba(0,191,255,0.8)",
            highlightFill: "rgba(100,149,237,0.75)",
            highlightStroke: "rgba(100,149,237,1)",
            data: [60, 50, 40, 30, 20, 10, 20]
        }
    ]
};
var ctx = document.getElementById("singleBarOptions").getContext("2d");
var myNewChart = new Chart(ctx).Bar(singleBarData, singleBarOptions);

有没有简单的方法来画这条线？如果我以后能改变线条的位置也很好。

stackoverflow 上有解决方案，但它们不处理设置。

【问题讨论】：

你能把这个放在小提琴里并分享链接吗？，
Chart.js - draw horizontal line的可能重复
它不是重复的，它们只有一个数据集。我不知道如何将我的设置添加到他们的代码中。
请创建您尝试过的代码的小提琴

标签： javascript bar-chart chart.js

【解决方案1】：

是的，使用注释插件：Chart.Annotation.js

annotation: {
    annotations: [{
        type: 'line',
        mode: 'horizontal',
        scaleID: 'y-axis-0',
        value: '26',
        borderColor: 'tomato',
        borderWidth: 1
    }],
    drawTime: "afterDraw" // (default)
}

结果：

Codepen：Chart.js Annotations BarChart

注意：我使用的是 V 2.2.1，我相信你的语法来自以前的版本，所以我只使用你的数据和一些选项。

【讨论】：