需要在app.module.ts中引用
import { PiePage } from '../pages/pie/pie';
import { ChartsModule } from 'ng2-charts';
加载此界面前已经获取饼状图需要的数据,如下:
import { Component} from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { InterceptorProvider } from '../../providers/interceptor/interceptor';
// @IonicPage()
@Component({
selector: 'page-pie',
templateUrl: 'pie.html',
})
export class PiePage{
id: string;
zentao: any;
kernelFree: any;
luckDraw: any;
ionViewDidLoad() {
}
public doughnutChartLabels: string[] = ['自由加分', '抽奖', '禅道'];
public doughnutChartData: number[] = [JSON.parse(localStorage.getItem("kernelFree")), JSON.parse(localStorage.getItem("luckDraw")), JSON.parse(localStorage.getItem("zentao"))];
// public doughnutChartData: number[] = [100, 100, 100];
public doughnutChartType: string = 'doughnut';
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public http: InterceptorProvider
) {
}
// events
public chartClicked(e: any): void {
console.log(e);
}
public chartHovered(e: any): void {
console.log(e);
}
}
pie chart中html代码
<ion-header>
<ion-navbar>
<ion-title>积分分析</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div style="display: block">
<canvas baseChart
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
</div>
<br>
<span style="text-align:center;display: block;color: gray;">点击饼状图色块查看详细积分</span>
<span style="text-align:center;display: block;color: gray;">点击颜色介绍可关闭此类别,再次点击打开</span>
</ion-content>
ts代码
import { Component} from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { InterceptorProvider } from '../../providers/interceptor/interceptor';
// @IonicPage()
@Component({
selector: 'page-pie',
templateUrl: 'pie.html',
})
export class PiePage{
id: string;
zentao: any;
kernelFree: any;
luckDraw: any;
ionViewDidLoad() {
}
public doughnutChartLabels: string[] = ['自由加分', '抽奖', '禅道'];
public doughnutChartData: number[] = [JSON.parse(localStorage.getItem("kernelFree")), JSON.parse(localStorage.getItem("luckDraw")), JSON.parse(localStorage.getItem("zentao"))];
// public doughnutChartData: number[] = [100, 100, 100];
public doughnutChartType: string = 'doughnut';
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public http: InterceptorProvider
) {
}
// events
public chartClicked(e: any): void {
console.log(e);
}
public chartHovered(e: any): void {
console.log(e);
}
}
遇到的问题:当加载pie chart界面的时候,默认先加载饼状图,获取库中真是数据后,无法把值赋值给饼状图。此时需要改一下代码运行步骤。