如何更改一条特定线的网格线宽度
比利
我需要更改Chartjs图表上一条特定网格线上的线宽（或颜色）的帮助。
在下面的示例中，我只想增加水平网格线在y轴60处的网格线宽度（或更改颜色）。我已尽力在Chartjs文档中找到解决方案，但失败了。也许目前尚无对此的支持，如果是这样，我想知道是否有人可以帮助我添加此功能。
谢谢 ！
土豆皮
您可以扩展图表以覆盖比例绘制功能，并在需要的位置绘制粗线/其他颜色的线
预览
脚本
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/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何为一条Y轴线和另一条网格线着色？
- 2
更改nvd3中的第一条垂直网格线
- 3
删除高图中的第一条和最后一条网格线？
- 4
如何找到X和Y的角度，然后绘制一条以可变角度横切每条网格线的线？
- 5
如何在Google条形图中绘制一条具有特定值的附加水平网格线（不是平均值）
- 6
WPF / MVVM DataGrid-即使GridLinesVisibility为False，也显示一条水平网格线
- 7
Highcharts网格线宽度（或颜色）-单线
- 8
如何更改TStringGrid网格线的颜色？
- 9
时间轴图表仅显示第一条网格线和刻度标签（unitStepSize）
- 10
如何统一显示网格线？
- 11
如何更改Excel图表中主要网格线的起点？
- 12
如何在网格窗格的间隙之间对齐一条线？
- 13
FPDF-绘制一条横跨宽度居中的线
- 14
FPDF-绘制一条横跨宽度居中的线
- 15
更改单个网格线颜色ggvis
- 16
iOS图表更改网格线颜色
- 17
如何将单个值的表示方式从条形更改为一条线？
- 18
如何将一条线的点移动到特定位置？
- 19
Java Swing，以特定角度画一条线？
- 20
HTML Canvas - 从特定点旋转一条线
- 21
Bootstrap 3使用SASS mixin更改特定容器上的网格列数和装订线宽度
- 22
python-如何使用python从网格中的一条线获取上部和下部的坐标？
- 23
如何内嵌显示网格线项目？
- 24
Seaborn如何增加网格线的数量？
- 25
如何使图表中的网格线静态
- 26
如何绘制比例缩放的网格线？
- 27
MPAndroidChart：如何删除网格线？
- 28
更改特定网格线 ggplot2 R 脚本的颜色
- 29
如何从一条点画一条线到多点列表
我来说两句