角图添加水平线

问题描述

我想在这里添加水平线[到我的angular-chart.js（如果我理解正确，我需要做的是扩展线型图表。）

I want add horizontal line like here [Chart.js - draw horizontal line to my angular-chart.js (if I understand right, what I need to do is to extend the line type chart).

我如何以及在哪里应该这样做（编写自己的指令，尝试扩展角度.config中的char.js）？

How and where I should do it (write own directive, try extend the char.js in angular .config)?

推荐答案

首先，你需要使用您在帖子中提到的扩展来扩展Chart.js，如下所示:(使用代码段）

First of all, you need to extends Chart.js with the extend you mentionned in your post, like this : (using @jbman223 snippet)

// 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);
}
});

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

Then, we have to link this new Chart type with angular-chart. Unfortunately, it is a high level of abstraction library, so there is no built-in feature for that. So, the only way I have found to do that so far is to modify angular-chart.js by adding a line in the config :

  return angular.module('chart.js', [])
  .provider('ChartJs', ChartJsProvider)
  .factory('ChartJsFactory', ['ChartJs', '$timeout', ChartJsFactory])
  //...
  .directive('chartLinebis', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('LineWithLine'); }]);

最后，使用新的图表标签调用角度图表：

Finally, call angular-chart with your new chart label :

      <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

Note that it is very important that the js imports respect this order : chart.js -> myExtend.js -> angular-chart.js

（免责声明：为了导入订单，我在片段中间加入了angular-chart.js）

JSFiddle (disclaimer : I included angular-chart.js in the middle of the snippet for import order purpose)

这篇关于角图添加水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！