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下面添加从＆＃39; ng2-charts＆＃39;;

导入{ChartsModule}

imports: [
   ChartsModule
]

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

Answer 1

你所做的installations steps是正确的！

请参阅以下Plunker，其中介绍了使用SystemJS的ng2-chart的工作版本。

您的组件应如下所示：

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
        }
      }]
    }
  };
}

如何在角度2中使用ng2-chart.js指令？

1 个答案: