8

我在 angular2 属性指令中渲染图表（angular2 团队采用的一种方法）。此方法适用于 chart.js，但不适用于 chart.js 2.x

属性指令的代码是...

import {Directive, ElementRef, Input} from '@angular/core';

declare var Chart:any;

@Directive({
  selector: '[bargraph]'
})

export class BarGraphDirective {

  el:any;
  myChart:any;

  constructor(element:ElementRef) {
    this.el = element.nativeElement;
  }

  ngAfterViewInit() {
    var canvas = this.el;
    var ctx = canvas.getContext('2d');

    var _data = {
      labels: ["01-01",
        "01-04",
        "01-15",
        "02-03",
        "03-25",
        "04-03",
        "04-14",
        "05-27",
        "05-27",
        "08-03"],
      datasets: [{
        data: [5, 13, 23, 20, 5, 13, 23, 20, 110, 2],
        label: "female",
        borderColor: "rgba(197,23,1,0.8)",
        backgroundColor: "rgba(197,23,1,0.4)",
        hoverBackgroundColor: "rgba(197,23,1,1)",
        borderWidth: 1,
        pointBorderColor: "rgba(197,23,1,1)",
        pointBackgroundColor: "rgba(255,255,255,0.8)",
        pointBorderWidth: 1.5,
        tension: -1,
        yAxisID: "y-axis-1",
      }, ],
    };

    var _options = {
      scales: {
        xAxes: [{
          categorySpacing: 0
        }],
        yAxes: [{
          type: "linear",
          display: true,
          position: "left",
          id: "y-axis-1",
        }]
      }
    };

    this.myChart = new Chart(ctx, {
      type: "line",
      data: _data,
      options: _options
    });

    console.log(ctx);
    console.log(this.myChart);
  }
}

造型是...

canvas[bargraph] {
  height: 400px !important;
  width: 700px !important;
}

使用它的组件有...

<canvas bargraph width="700" height="400"></canvas>

在模板中。

一切都如预期。console.log 语句显示 ctx 和 this.myChart 都在 ngAfterViewInit 生命周期钩子中定义。没有错误。该图根本不显示。

PS Chart.js v2 代码在 Angular2 之外可以正常工作，根据这个 JS Fiddle - http://jsfiddle.net/beehe4eg/

JSFiddle 和我的代码之间的唯一区别是挂钩到 DOM ...

document.getElementById("barChart") // for the fiddle

element.nativeElement // in my code as per the approach in the angular 2 docs

属性指令的文档，特别是 DOM 钩子的文档是 ... https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#our-first-draft

element.nativeElement 钩子适用于带有 angular2 的 chart.js v1（使用相同的方法）。

请注意，github repo ... https://github.com/valor-software/ng2-charts 正在使用 chart.js v1，所以这无济于事

希望那里的人可能知道解决方案或可以解决它！提前致谢。

4

2 回答 2

10

canvas 元素的父元素必须是有效的 HTML 元素，它不能是 Angular2 组件标签，例如my-app.

所以这在使用 Chart.js 时不起作用：

<my-chart-component>
  <canvas></canvas>
</my-chart-component>

这有效：

<div>
  <canvas></canvas>
</div>

不确定这是否是您的问题。

于 2016-05-09T22:33:44.093 回答
4

跟进：

另一个可能的问题是您尝试在非块元素内渲染画布。

默认情况下，任何带有标签选择器的 Angular 组件都是内联的

所以你可以让它阻塞：

:host {
  display: block;
}

回答

今天的当前版本是 2.1.0。API 有变化。2.0-alpha 版本于 2015 年 6 月 5 日发布。https://github.com/chartjs/Chart.js/releases/tag/v2.0-alpha 您在 jsfiddle 中使用的版本是 2.0.0-alpha4（2015 年 6 月 22 日, 哈希 9368c6079d989527dcd2072b6f18780b53e3113c)

您需要按如下所述更改您的代码：

this.myChart = new Chart(ctx).Line({
  data: _data,
  options: _options
});

请参阅图表 v2.0-alpha https://plnkr.co/edit/IFdEeMcS9lHGWrsUwkGb?p=preview的工作示例

如果你使用语法 2.1.3 那么你可以这样写：

this.myChart = new Chart(ctx, {
  type: 'line',
  data: _data,
  options: _options
});

v2.1.3 示例https://plnkr.co/edit/GubwdD9Voo3mBPYYKEEL?p=preview

于 2016-05-04T04:53:13.767 回答