轉載出處：http://www.jianshu.com/p/99f4bbc9dad0
參考：angular2+highcharts+chart.js 如何在Ionic2項目中使用第三方JavaScript庫
一：highchart環境配置
1. npm install highcharts –save
2. typings install dt~highcharts –global --save
發現沒安裝typings
3返回安裝typings
npm install –g typings
返回繼續操作步驟2
發現沒有highchart查找了一下：
二. chart 環境配置
1 npm install chart.js --save
2 typings install chart.js --save
chart 的環境配置好了
三 .項目中使用：
在real.html 中
<ion-content class="page-real">
<canvas id="myChart" width="400" height="100" class="mychart">
<div #chart class="highchart"></div>
</ion-content>
在 real.scss 中：定義表格的一些樣式
在real.ts中
import {Component,ElementRef,AfterViewInit,OnDestroy,ViewChild} from '@angular/core';
import { NavController } from 'ionic-angular';
import * as ChartJs from 'chart.js'; // 導入chart.js
import * as Highcharts from 'highcharts' ;//highcharts圖表
@Component({
selector: 'page-real',
templateUrl: 'real.html'
})
export class RealPage {
constructor(public navCtrl: NavController) { }
ionViewDidEnter() {
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d"); // 這裏是關鍵, 不能寫在constructor()中
ChartJs.Line(ctx,{
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
})
}
@ViewChild('chart') public chartEl: ElementRef; //highcharts
private _chart: any; //highcharts
//highcharts
public ngAfterViewInit() {
let opts: any = {
title: {
text: 'Monthly Average Temperature',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'Tokyo',
data: [
7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6
]
},
{
name: 'Tokyo1',
data: [5.0, 6.9, 1.5, 14.5, 18.2, 21.5, 25.2,26.5, 11.3, 25.3, 127.9, 10.6 ]
}
]};
if (this.chartEl && this.chartEl.nativeElement) {
opts.chart = {
type: 'line',
renderTo: this.chartEl.nativeElement
};
this._chart = new Highcharts.Chart(opts);
}
}
public ngOnDestroy() {
this._chart.destroy();
}
}
四 效果圖
1 chart
2 highchart
有錯誤的地方，還請大家指出，謝謝！！