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

VipPunkJoshers下垂

我正在使用Angular 2 V4.0.0的最新版本，并且我想在我的项目中使用Chart.js库中的图形，而不会带来很多麻烦。

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

VipPunkJoshers下垂

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

1.使用angular-cli创建一个新项目，如果已经创建了一个项目，则跳过

ng new example-chartjs

2.在您的项目中安装Chart.js

npm install chart.js --save

3.将图表导入其组件

import Chart from 'chart.js';

4.在视图和组件中使用图表

您认为：

<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.在控制器中声明一个“ any”类型的变量

declare var Chart:any;

3.在视图和组件中使用图表

您认为：

<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, {....});

  }

}