Chart.js v2图表不显示在角度2内(但Chart.js v1完美运行)

Question

我在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小提琴 - 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,所以这没有帮助

希望有人在那里可能知道解决方案或可以解决它!提前致谢.

Answer 1

canvas元素parent必须是一个有效的HTML元素,它不能像Angular2组件标签那样my-app.

所以当使用Chart.js时这不起作用:

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

这有效:

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

不确定这是不是你的问题.

Answer 2

跟进：

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

默认情况下，任何带有标签选择器的 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