javascript - Angular 图添加水平线

标签 javascript angularjs chart.js

我想添加水平线,如下所示[ Chart.js - draw horizontal line到我的 angular-chart.js (如果我理解正确的话,我需要做的是扩展线型图表)。

我应该如何以及在哪里执行此操作(编写自己的指令,尝试在 Angular .config 中扩展 char.js)?

最佳答案

首先,您需要使用您在帖子中提到的扩展来扩展 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);
}
});

然后,我们必须将这个新的图表类型与 Angular 图表链接起来。不幸的是,它是一个高级抽象库,因此没有内置功能。因此,到目前为止,我发现做到这一点的唯一方法是通过在配置中添加一行来修改 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 以用于导入订单)

关于javascript - Angular 图添加水平线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36839760/

相关文章:

javascript - 有人可以解释在使用 QUnit 进行单元测试时使用 qunit-fixture 吗?

javascript - 生成 HTML 表单

带有环回的findOne上的Mysql ER_BAD_FIELD_ERROR

javascript - 如何在 chart.js (chartjs.org) 中为所有图表类型添加标签/图例?

javascript - "Bar"可以放在 Chart.js 中垂直网格线的中心吗?

Javascript 获取视频长度

javascript - 如何从扩展中检测页面加载错误?

javascript - Angularjs 找不到 Controller

angularjs - 在 Angular 中同步多个 View

php - 如何基于 COUNT(php + mysql) 创建饼图?