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元素，它不能是像my-app这样的Angular2组件标记。

因此，使用Chart.js时这不起作用：

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

这有效：

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

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

Answer 2

今天当前版本是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

的示例

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

2 个答案: