Javascript 在chart.js图形上覆盖线

我想知道是否有可能在chart.js图的顶部覆盖一条线，比如一个折线图？例如，在x轴上，将在图形上以值20绘制一条水平线

我创建了一个称为覆盖图的东西，我已将其添加到chart.js（）的分支中，可以在这种情况下使用。它的工作原理与折线图或条形图相同，唯一的区别是您声明了一个名为

type

的额外属性，该属性可以是

'line'

或

'bar'

。然后只需调用

新图表（ctx）。覆盖（数据）

因此，对于您的示例，您可以只使用条形图，然后提供另一个数据集（具有比我使用的更好的颜色）来显示线条

var数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
//新选项，barline将默认为bar，用于创建比例
键入：“行”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（0,0,0,0.6）”，
pointColor:“rgba（0,0,0,0.6）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
datasetFill:false，
数据：[20,20,20,20,20,20,20,20]
}, {
标签：“我的第一个数据集”，
//新选项，barline将默认为bar，用于创建比例
输入：“酒吧”，
填充颜色：“rgba（220,20220,0.2）”，
strokeColor:“rgba（220,20220,1）”，
pointColor:“rgba（220,20220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[32,25,33,88,12,92,33]
}]
};
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
var图表=新图表（ctx）。覆盖（数据{
回答：错
});
我需要类似的东西，但我需要的不是像真正的平面叠加线那样的线图

将图表扩展如下：

    Chart.types.Bar.extend({
        name: 'BarOverlay',
        draw: function (ease) {
            Chart.types.Bar.prototype.draw.apply(this);
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
            ctx.moveTo(35, this.scale.calculateY(100));
            ctx.lineTo(this.scale.calculateX(this.datasets[0].bars.length), this.scale.calculateY(100));
            ctx.stroke();
        }
    });

new Chart(ctx).BarOverlay(data, options);

我的是硬编码的，在“100”标记处画一条线（在本例中，我们的目标是100%）

这样称呼它：

    Chart.types.Bar.extend({
        name: 'BarOverlay',
        draw: function (ease) {
            Chart.types.Bar.prototype.draw.apply(this);
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
            ctx.moveTo(35, this.scale.calculateY(100));
            ctx.lineTo(this.scale.calculateX(this.datasets[0].bars.length), this.scale.calculateY(100));
            ctx.stroke();
        }
    });

new Chart(ctx).BarOverlay(data, options);

我也发现温柏的代码过时了，不符合1.0.2CART.JS代码（渲染方式都是横向的）。
 < P> StrangeWill的回答是很好的基础，但是我需要在条形图上需要数据驱动的垂直线，因此修改如下：

ChartDefaults.verticalOverlayAtBar = [itemOne, itemTwo]
...
var HistoryChart = new Chart(ctx).BarOverlay(ChartData, ChartDefaults);

首先，我在options数组中添加了一个属性（添加另一个数据集可能更干净，但我必须告诉ChartJS忽略它），其中每个选项都是我要突出显示的数据值索引，大致如下所示：

ChartDefaults.verticalOverlayAtBar = [itemOne, itemTwo]
...
var HistoryChart = new Chart(ctx).BarOverlay(ChartData, ChartDefaults);

然后，我修改了StrangeWill的代码，对其进行扩展，以迭代上面的项目数组，并在指示的条上绘制垂直线

Chart.types.Bar.extend({
    name: 'BarOverlay',
    draw: function (ease) {

        // First draw the main chart
        Chart.types.Bar.prototype.draw.apply(this);

        var ctx = this.chart.ctx;
        var barWidth = this.scale.calculateBarWidth(this.datasets.length);

        for (var i = 0; i < this.options.verticalOverlayAtBar.length; ++i) {

            var overlayBar = this.options.verticalOverlayAtBar[i];

            // I'm hard-coding this to only work with the first dataset, and using a Y value that I know is maximum
            var x = this.scale.calculateBarX(this.datasets.length, 0, overlayBar);
            var y = this.scale.calculateY(2000);

            var bar_base = this.scale.endPoint

            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
            ctx.moveTo(x, bar_base);
            ctx.lineTo(x, y);
            ctx.stroke();
        }
        ctx.closePath();
    }
});

Chart.types.Bar.extend({
名称：“巴罗弗雷”，
绘图：功能（轻松）{
//首先画主图表
图表。类型。条形图。原型。绘图。应用（此）；
var ctx=this.chart.ctx；
var barWidth=this.scale.calculateBarWidth（this.datasets.length）；
对于（变量i=0；i

这并不完美，因为我不熟悉ChartJs代码的内部结构，特别是我的代码行有2个小节，尽管我怀疑这是数据数组中的一个fencepost错误，而不是图表计算。不过，希望这对其他人来说是一个有用的进步。
谢谢！正是我想要的。非常感谢。