如何在 Angular 2 中使用 ng2-chart.js 指令？答案

【问题标题】：how to use ng2-chart.js directive in angular 2?如何在 Angular 2 中使用 ng2-chart.js 指令？
【发布时间】：2017-10-15 02:42:23
【问题描述】：

我已经使用 npm 安装了 ng2-charts

npm install ng2-charts --save 和 npm install chart.js --save

然后在下面添加到 index.html 中

<script src="node_modules/chart.js/src/chart.js"></script>

然后在下面添加到 app.module.ts 从 'ng2-charts' 导入 { ChartsModule };

imports: [
   ChartsModule
]

但我在检查控制台时遇到 ZoneAwareError，我使用的是 Angular 2.4.1 版本。将charts.js安装到angular 2的正确方法是什么？令人惊讶的是，尽管 chart.js 如此受欢迎，但我既没有找到关于它在 angular2 中安装的文档，也没有找到它在那里使用的简单示例。

【问题讨论】：

你使用的是 webpack 还是 system.js？
system.js @mikegeyser
您是否在页面上添加了任何图表或新代码？在最低限度的测试示例中，它只对我有用 - 抱歉。 :(
正如我在编译后所说的那样..我收到 zoneawareerror ..当我在控制台中签入时....@mikegeyser
你能告诉我你是怎么做的.....

标签： angularjs angular angularjs-directive angular2-template ng2-charts

【解决方案1】：

你做的installations steps是正确的！

请参阅下面的Plunker，它描述了带有 SystemJS 的 ng2-charts 的工作版本。

您的组件应如下所示：

import { Component } from '@angular/core';
import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';

@Component({
  selector: 'my-app',
  directives: [CHART_DIRECTIVES],
  styles: [`
    .chart {
      display: block;
    }
  `],
  template: `
    <base-chart
      class="chart"
      [datasets]="datasets"
      [labels]="labels"
      [options]="options"
      [chartType]="'line'">
    </base-chart>
  `
})
export class AppComponent {
  private datasets = [
    {
      label: "# of Votes",
      data: [12, 19, 3, 5, 2, 3]
    }
  ];

  private labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

  private options = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };
}

【讨论】：