java水平线代码_角图添加水平线

首先，您需要使用您在帖子中提到的扩展来扩展Chart.js，如下所示:(使用@jbman223片段)

// Extend chart.js with a new type of chart

Chart.types.Line.extend({

name: "LineWithLine",

initialize: function () {

Chart.types.Line.prototype.initialize.apply(this, arguments);

},

draw: function () {

Chart.types.Line.prototype.draw.apply(this, arguments);

// Needs to be set with angular-chart options

var lineAtIndex = 2;

var point = this.datasets[0].points[lineAtIndex]

var scale = this.scale

console.log(this);

// draw line

this.chart.ctx.beginPath();

this.chart.ctx.moveTo(scale.startPoint+12, point.y);

this.chart.ctx.strokeStyle = '#ff0000';

this.chart.ctx.lineTo(this.chart.width, point.y);

this.chart.ctx.stroke();

// write TODAY

this.chart.ctx.textAlign = 'center';

this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y+10);

}

});

然后，我们必须将这个新的Chart类型与角度图表链接起来 . 不幸的是，它是一个高级别的抽象库，因此没有内置功能 . 因此，到目前为止，我发现这样做的唯一方法是通过在配置中添加一行来修改angular-chart.js：

return angular.module('chart.js', [])

.provider('ChartJs', ChartJsProvider)

.factory('ChartJsFactory', ['ChartJs', '$timeout', ChartJsFactory])

//...

.directive('chartLinebis', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('LineWithLine'); }]);

最后，使用新图表标签调用angular-chart：

请注意，js导入对此顺序非常重要：chart.js - > myExtend.js - > angular-chart.js

JSFiddle(免责声明：我在代码段中间包含了angular-chart.js以用于导入订单)