圖表的工具有很多，如果朋友們還不知道從何下手，我們就簡單超基本圖表的ng-chart來，因為最簡單~ 超級簡單~ 因為太簡單了…所以第一次玩angular的朋友也會玩出動感的圖表喔!!!
1.
下戴ng-chart.js
2.
注入到angular 的 model
import { ChartsModule }
from 'ng2-charts/ng2-charts';
加入 imports
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig),
AngularFirestoreModule,
ChartsModule
],
Chart.htmlè 目前先示範bar 的圖表
<div >
<div style="display: block">
<canvas baseChart width="400" height="200"
[datasets]="barChart3Data"
[labels]="barChart3Labels"
[options]="barChart3Options"
[colors]="barChart3Colors"
[legend]="barChart3Legend"
[chartType]="barChart3Type"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
<ion-list>
<ion-item >
<ion-label><font color=black>年份</font></ion-label>
<ion-select [(ngModel)]="choiseYear"
(ionChange)="onChange()">
<ion-option *ngFor="let y of years" >{{y}}</ion-option>
</ion-select>
</ion-item>
</ion-list>
</div>
Chart.ts
客製化圖表的內容，有些參數用來顯示圖表的外觀，搭配html的參數設定
public barChart3Options: any = {
scaleShowVerticalLines: false,
responsive: true
};
//用來顯示橫軸的名稱
public barChart3Labels:
string[] = ['一月', '二月', '三月', '四月',
'五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
public barChart3Type:
string = 'bar'; //圖示的類型
public barChart3Legend:
boolean = true; //顯示圖例
//這是顯示圖表的陣列格式
public barChart3Data:
any[] = [
{ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], label: '2017' }
]; //用來顯示圖表的數據
//用來顯示圖片的背景色和前景色，依照barChart3Data的陣列值顯示不同顏包
public barChart3Colors:
Array<any> = [
{ // green
backgroundColor: 'lightgreen',
borderColor: 'green'
},
{ // red
backgroundColor: 'pink',
borderColor: 'red'
}
];
建立圖表的函式
doBarchartData(items)
{
var groupData = [];
var data = [];
var sumByMonth = 0;
// 以下程式用來整理出，可以匯出到chart圖表的的陣列集合
var example = this.myService.getGroupByMonth(items).subscribe(d
=> {
this.barChart3Labels.forEach((day, key) => {
if (d.length == 0) {
return [];
} else if (d[this.choiseYear] == undefined) {
return [];
}
if (d[this.choiseYear][key + 1] == undefined) {
data.push(0);
} else {
sumByMonth = 0;
d[this.choiseYear][key + 1].forEach((data, key) => {
sumByMonth = sumByMonth +
Number(data.cost);
})
data.push(sumByMonth);
}
})
//將結果匯出到圖表中
this.barChart3Data =
[
{ data: data, label: this.choiseYear },
];
});
}
