Chart.js v2 图表不显示在 angular 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 根据这个 JS Fiddle - http://jsfiddle.net/beehe4eg/

Chart.js v2 代码在 Angular2 之外工作正常

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 钩子适用于 chart.js v1 with angular2（使用相同的方法）。

请注意 github 回购 ... https://github.com/valor-software/ng2-charts 正在使用 chart.js v1 所以这没有帮助

希望有人知道解决方案或可以修复它！提前致谢。

Answer 1

跟进：

另一个可能的问题是您尝试在非块元素内呈现 canvas。

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

Answer 2

canvas 元素父元素必须是有效的 HTML 元素，不能是像 my-app.

这样的 Angular2 组件标签

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

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

这个有效：

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

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

Chart.js v2 图表不显示在 angular 2 内（但 Chart.js v1 完美运行）

Chart.js v2 charts do not display inside angular 2 (but Chart.js v1 works perfectly)

chart.js

chart.js2

angular

跟进：

回答