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

Question

我已经使用 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 import { ChartsModule } from 'ng2-charts';

imports: [
   ChartsModule
]

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

Answer 1

你做的安装步骤是正确的！

请参考下面的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
        }
      }]
    }
  };
}