Angular5 + ng-Chart 簡易示範

圖表的工具有很多，如果朋友們還不知道從何下手，我們就簡單超基本圖表的ng-chart來，因為最簡單~ 超級簡單~  因為太簡單了…所以第一次玩angular的朋友也會玩出動感的圖表喔!!!

1.    下戴ng-chart.js

 https://valor-software.com/ng2-charts/

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 },

      ];

    });

  }