2017年12月3日 星期日

Angular5 + ng-Chart 簡易示範

圖表的工具有很多,如果朋友們還不知道從何下手,我們就簡單超基本圖表的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 },
      ];
    });
  }




沒有留言:

張貼留言