javascript - 如何在 Angular 2 中实现 Chart.js？

Question

我正在使用最新版本的 Angular 2 V4.0.0，我想在我的项目中使用来自 Chart.js 库的图表，而不会有很多复杂情况。

如何在我的 Angular 项目中实现 Chart.js 而不会在最终产品中给我带来问题？

Answer 1

您可以按照以下说明以简单的方式实现 Chart.js:

<强>1。使用angular-cli创建一个新项目，如果已​​经创建则跳过

ng new example-chartjs

<强>2。在您的项目中安装 Chart.js

npm install chart.js --save

<强>3。将图表导入其组件

import Chart from 'chart.js';

<强>4。在您的 View 和组件中使用图表

在你看来:

<canvas id="myChart" width="400" height="400"></canvas>

在你的组件中:

ngOnInit() {

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {...});

}

该组件应类似于以下内容

import { Component, OnInit } from '@angular/core';
import Chart from 'chart.js';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html'
})

export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {....});

  }

}

另一种替代方法是从文件“.angular-cli.json”中包含库

<强>1。在脚本中包含库

"styles": [
  "styles.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/chart.js/dist/Chart.min.js"
]

<强>2。在 Controller 中声明一个“any”类型的变量

declare var Chart:any;

<强>3。在您的 View 和组件中使用图表

在你看来:

<canvas id="myChart" width="400" height="400"></canvas>

在你的组件中:

ngOnInit() {

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {...});

}

该组件应类似于以下内容

import { Component, OnInit } from '@angular/core';

declare var Chart:any;

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html'
})

export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {....});

  }

}