ionic Pie chart

版权声明：本文为作者原创，转载请注明出处。 https://blog.csdn.net/vop444/article/details/82562133

需要在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界面的时候，默认先加载饼状图，获取库中真是数据后，无法把值赋值给饼状图。此时需要改一下代码运行步骤。

参考文章：https://www.djamware.com/post/598953f880aca768e4d2b12b/creating-beautiful-charts-easily-using-ionic-3-and-angular-4