角圖添加水平線

Question

我想在此處添加水平線[ Chart.js-在我的angular-chart.js中繪制水平線 （如果我理解正確，我需要做的就是擴展線型圖表）。

我應該怎么做以及在哪里做（編寫自己的指令，嘗試在angular .config中擴展char.js）？

Answer 1

首先，您需要使用您在帖子中提到的擴展來擴展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鏈接。 不幸的是，它是高級抽象庫，因此沒有內置功能。 因此，到目前為止，我發現這樣做的唯一方法是通過在config中添加一行來修改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：

      <canvas class="chart chart-linebis" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series"></canvas>

請注意，js導入必須遵守此順序，這一點非常重要：chart.js-> myExtend.js-> angular-chart.js

JSFiddle （免責聲明：出於引入訂單的目的，我在代碼段的中間添加了angular-chart.js）