由於Angular 本身並沒有提供圖表的模組，所以今天我們要使用第三方的函式庫來建立圖表。

我們今天會用到的兩個套件：ng2-charts 和 chart.js。chart.js 本身是提供多種圖表製作函式的 library。chart.js 的用法可以在這邊查詢。

那 ng2-charts 呢，可以幫助我們很方便的用 Directive，給圖表參數與資料。原先我們要先取得一個 canvas 的 DOM 物件，再將圖表餵進去。使用 ng2-charts，就可以用 Binding，將資料跟 Html 分離。ng2-charts 也有一些範例可以參考。

安裝

在專案底下輸入這行指令，安裝 ng2-charts 和 chart.js

npm install ng2-charts chart.js --save

然後我們要在 angular.json 的 script 欄位加入 Chart.js 的檔案路徑。如果有 error 的話，就到 node_modules 底下去找正確的檔案名：

"scripts": [
              "./node_modules/chart.js/dist/Chart.min.js"
           ]

在 AppModule 裡 import ChartsModule：

// app.module.ts

import { ChartsModule } from 'ng2-charts';

 imports: [
    ...
    ChartsModule
  ]

準備圖表

到這邊已經完成全部的準備工作了，然後我們準備圖表的資料：

barChartLabels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; 
barChartData = [ 
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
  ];

• barChartLabels 是一個陣列，放入顯示在 X 軸的資料。

• barChartData 也是一個陣列，放 Y 軸的資料。一組資料包含一個 data 陣列，和 label 欄位，表示這組 data 的名字。

  barChartOptions = {
    responsive: true
  };
  
  barChartType = 'bar';
  barChartLegend = true; 

• barChartOptions 裡的 responsive 是指圖表要不要隨裝置縮放。那還有很多選項可以在這邊設定。

• barChartType 是圖表的類型，可以是 line、 bar等等，代表柱狀圖、折線圖或其他圖表。

• barChartLegend 是選擇要不要顯示 Legend，就是圖表上方的這個東西：

最後，把這些設定好的資料，透過 binding 傳給 html 的 canvas：

// charts.component.ts
  barChartOptions = {
    responsive: true
  };
  barChartType = 'bar';
  barChartLegend = true;

  barChartLabels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  barChartData = [
    {data: [65, 59, 80, 81, 56, 55, 400], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
  ];

// charts.component.html

<div style="display: block;width: 80%;">
  <canvas baseChart
          [datasets]="barChartData"
          [labels]="barChartLabels"
          [options]="barChartOptions"
          [legend]="barChartLegend"
          [chartType]="barChartType">
  </canvas>
</div>

就可以很容易實現圖表呈現了：

參考 : https://medium.com/codingthesmartway-com-blog/angular-chart-js-with-ng2-charts-e21c8262777f