任何人都可以告诉我如何扩展Chart.js v2.0 . 我需要折线图中的垂直线,我想实现类似于http://jsfiddle.net/dbyze2ga/的东西 .
Chart.types.Line.extend({
name: "LineWithLine",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var point = this.datasets[0].points[this.options.lineAtIndex]
var scale = this.scale
// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.lineTo(point.x, scale.endPoint);
this.chart.ctx.stroke();
// write TODAY
this.chart.ctx.textAlign = 'center';
this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
}
});
new Chart(ctx).LineWithLine(data, {
datasetFill : false,
lineAtIndex: 2
});
3 回答
UPDATE :有关使用Chart Annotations插件的更简单且更健壮的解决方案,请参阅https://stackoverflow.com/a/45092928/360067 .
您可以扩展
line
类型以添加对绘制线条的支持Preview
Script
然后
小提琴 - http://jsfiddle.net/mn8x6fso/
对于v2.0,最好的方法是使用Chart Annotations插件(https://github.com/chartjs/chartjs-plugin-annotation)
小提琴 - https://codepen.io/anon/pen/ZywgKr
Script
Cross发表于https://github.com/chartjs/Chart.js/issues/4495#issuecomment-315238365
对于那些寻找水平线的人来说,这是我到目前为止所得到的:
jsFiddle