如何更改一条特定线的网格线宽度答案

【问题标题】：How to change grid line width for one specific line如何更改一条特定线的网格线宽度
【发布时间】：2016-04-25 19:03:49
【问题描述】：

我需要帮助来更改 Chartjs 图表上特定网格线上的线宽（或颜色）。

在下面的示例中，我想仅在 y 轴 60 处增加水平网格线的网格线宽度（或更改颜色）。我已尽力在 Chartjs 文档中找到解决方案，但失败了。目前可能不支持此功能，如果支持，我想知道是否有人可以帮助我添加此功能。

谢谢！

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

您可以扩展图表以覆盖比例绘制功能并在您想要的位置绘制更粗/不同颜色的线

预览

脚本

Chart.types.Bar.extend({
    name: "BarAlt",
    initialize: function(data){
        Chart.types.Bar.prototype.initialize.apply(this, arguments);

        var originalScaleDraw = this.scale.draw;
        this.scale.draw = function() {
             originalScaleDraw.apply(this, arguments);
             this.ctx.save();
             this.ctx.beginPath();
             this.ctx.lineWidth = this.gridLineWidth * 5;
             this.ctx.strokeStyle = "rgba(120,120,220,1)";
             this.ctx.moveTo(Math.round(this.xScalePaddingLeft), this.calculateY(60));
             this.ctx.lineTo(this.width, this.calculateY(60));
             this.ctx.stroke();
             this.ctx.closePath();
             this.ctx.restore();
        }
    }
});

然后

...
new Chart(ctx).BarAlt(data);

小提琴 - http://jsfiddle.net/udojrq57/

【讨论】：

谢谢，这正是我想要的，而且效果很好。