Ionic图表（饼状图等）的使用

一、html核心代码

"""

……

<ion-content padding>

  <div style="display: block;">

    <canvas baseChart

            [data]="doughnutChartData"

            [labels]="doughnutChartLabels"

            [chartType]="doughnutChartType"

            (chartHover)="chartHovered($event)"

            (chartClick)="chartClicked($event)">

    </canvas>

  </div>

</ion-content>

"""

二、TS核心代码

（可优化，核心是变量的初始化再赋值）

"""

……

// Doughnut

  public doughnutChartType:string = 'doughnut';

  public doughnutChartLabels:string[] = [this.get_label('label1'), this.get_label('label2'), this.get_label('label3'), this.get_label('label4'), this.get_label('label5')];

  public doughnutChartData:number[] = [this.get_number('data1'), this.get_number('data2'), this.get_number('data3'), this.get_number('data4'), this.get_number('data5')];

……

页面每次加载后，更新doughnutChartData的数据

……

get_number(data: string): number{

    return Number(localStorage.getItem(data));

  }

  get_label(data: string): string{

    return localStorage.getItem(data).toString();

  }

……

"""

其实还是很好实现的，折腾了好几天的原因是：

1. 没有关注到变量的初始化（细节）

2. 对Angular语法不够了解（概念）

3.对报错未定位到某一行（调试技巧）

4. 对于参考代码中，对方未给全的地方，自己没想办法补上。

最后效果如图（点击日统计、周统计、月统计、年统计会自动更新图表）。

Ionic图表

参考资料

创建美丽的图表轻松使用Ionic 3和Angular 4

ionic Pie chart

1.7 ionic3入门——本地存储