ng2-chartsモジュールを使ってAngularでグラフを描画する  

## 環境

- Angular： v9.0.4
- Node： v12.16.1
- OS： win32 x64

## Chart.jsとは

Chart.jsはグラフを描画するJavaScriptライブラリである。  
動的、静的グラフの両方を作成でき、様々なグラフを描画できる。  

## ng2-chartsについて

### ng2-chartsとは

Angurlar2以降のために構築されたオープンソースのJavaScriptライブラリである。  
ng2-charts：(<https://www.npmjs.com/package/ng2-charts>)  

### ng2-chartsのプロパティ  

- data(Single Or Multi DataSet) - 描画するグラフのデータ。折れ線、棒、レーダー、ドーナツグラフはMultiDataSetでなければならない。それ以外はSingleDataSet。
- datasets({ data:SingleDataSet, labele: string }[]) - データの凡例とツールチップに表示されるデータセットのラベル。
- label(Label[]) - x軸のラベル。折れ線、棒、レーダーグラフには必要。
- chartType(ChartType) - チャートタイプ。グラフの種類を設定する。line, bar, radar, pie, polarArea, doughnut
- colors(Color[]) - データの色。指定なしの場合は、デフォルト値もしくはランダム値を使用される。色より多くのデータがある場合もランダム色が生成される。
- legend:(boolean = false) - trueの場合、凡例を表示する。それ以外の場合は表示されない。

### ng2-chartsのイベント

- chartClick：チャートのクリックが発生すると起動。アクティブなポイントとラベルに関する情報を返す。
- chartHover：チャートでmousemove(Hover)が発生すると起動。アクティなポイントとラベルに関する情報を返す。  

## Angularプロジェクトに設定する  

```powershell
ng new angular-charts-app
```

cssやrouteringについてきかれるが、こだわりなければEnterで進めてよい。

プロジェクトフォルダに移動。  
Angularで各チャートを表示するコンポーネントを生成する。  

```powershell
ng generate component bar-chart

ng g c bubble-chart # generate component略

ng g c line-chart

ng g c pie-chart

ng g c radar-chart

ng g c doughnut-chart
```

## Chart.js、ng2-chartsライブラリを設定する

必要なjsライブラリをnpm i する。  

```powershell
npm install ng2-charts chart.js --save
```

_package.json_ ファイル内に記述されているのを確認。

```json: package.json
    "chart.js": "^2.9.3",
    "ng2-charts": "^2.3.0",
```

_app.modules.ts_ ファイル内に _ChartModule_ を _import_ する。  

```typescript:app.modules.ts
// 変更箇所のみ記載
import { ChartsModule } from 'ng2-charts';  // 追加

...

@NgModule({
  declarations: [...],
  imports: [
    ChartsModule  // 追加
  ],
  ...

```

## グラフの描画

各componentを記述しておく

```html:app.component.html
<app-line-chart></app-line-chart>
<app-bar-chart></app-bar-chart>
<app-doughnut-chart></app-doughnut-chart>
<app-radar-chart></app-radar-chart>
<app-pie-chart></app-pie-chart>
<app-bubble-chart></app-bubble-chart>
```

各componentのtypescriptには _ngOnInit()_ がデフォルトで記述されているが今回使用しないので消去して。

### 折れ線グラフ

月別平均湿度をグラフ化してみる。（参考値）

_line-chart.component.ts_　ファイルに記述する。  

```typescript:line-chart.component.ts
import { Component } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js'; // データ型をimport
import { Color, Label } from 'ng2-charts'; // ng2-chartsのプロパティのデータ型をimport


@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent {

  // data
  lineChartData: ChartDataSets[] = [
    {
      data: [100, 60, 90, 0, 80, 50],
      label: '平均湿度'
    },
  ];

  // ラベル
  lineChartLabels: Label[] = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
  ];

  lineChartOptions = {
    responsive: true,
  };

  // 色
  lineChartColors: Color[] = [
    {
      borderColor: 'black',
      backgroundColor: 'rgba(255,0,255,0.28)',
    },
  ];

  lineChartLegend = true; // グラフの属性ラベル
  lineChartPlugins = [];
  lineChartType = 'line'; // グラフの種類

  constructor() { } // 使わないし削除してもよい

}
```

line-chart.component.htmlファイルでさっきの定義した変数をプロパティに設定していく

```html:line-chart.component.html
<div>
  <canvas baseChart
    [datasets]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType"
    [plugins]="lineChartPlugins">
  </canvas>
</div>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467168/04adc00d-8595-ce1c-abb6-537f4ef3bd4e.png)

終わり。

### 棒グラフ

6ヶ月の降水量をグラフ化してみる。（参考値）

```typescript:bar-chart.component.ts
import { Component } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent {

  barChartOptions: ChartOptions = {
    responsive: true,
  };
  barChartLabels: Label[] = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
  ];
  barChartType: ChartType = 'bar';
  barChartLegend = true;
  barChartPlugins = [];

  barChartData: ChartDataSets[] = [
    {data: [100, 200, 70, 600, 450, 300], label: '月別降水量' }
  ];

}

```

```html:bar-chart.component.html
<div>
  <canvas baseChart
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467168/4d3632ea-6f8c-ec3a-35c3-c89ab2e967bc.png)

終わり。

### 円グラフ

朝ごはんの割合

```typescript:pie-chart.component.ts
import { Component } from '@angular/core';
import { ChartOptions, ChartType } from 'chart.js';
import { Label, SingleDataSet } from 'ng2-charts';

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css']
})
export class PieChartComponent {

  pieChartOptions: ChartOptions = {
    responsive: true,
  };

  pieChartLabels: Label[] = ['米', 'パン', '麺類', 'その他'];

  pieChartData: SingleDataSet = [40, 30, 3, 27];

  pieChartPlugins = [];
  pieChartLegend = true;
  pieChartType: ChartType = 'pie';
}

```

```html:pie-chart.component.html
<div>
  <canvas baseChart
    [data]="pieChartData"
    [labels]="pieChartLabels"
    [options]="pieChartOptions"
    [plugins]="pieChartPlugins"
    [legend]="pieChartLegend"
    [chartType]="pieChartType">
  </canvas>
</div>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467168/ea72bc2a-0c91-0b7f-ab40-ac7485cee543.png)

終わり。


### ドーナツグラフ

Angular, Vue, React, jQueryの使用率をグラフ化してみる（参考値）。  

```typescript:doughnut-chart.component.ts
import { Component } from '@angular/core';
import { ChartType } from 'chart.js';
import { MultiDataSet, Label } from 'ng2-charts';

@Component({
  selector: 'app-doughnut-chart',
  templateUrl: './doughnut-chart.component.html',
  styleUrls: ['./doughnut-chart.component.css']
})
export class DoughnutChartComponent {
  doughnutChartLabels: Label[] = ['jQuey', 'React', 'Vue', 'Angular'];
  doughnutChartData: MultiDataSet = [[
    40, 30, 25, 5],
  ];
  doughnutChartType: ChartType = 'doughnut';
}

```

```html:doughnut-chart.component.html
<div>
  <canvas baseChart 
  [data]="doughnutChartData"
  [labels]="doughnutChartLabels"
  [chartType]="doughnutChartType">
</canvas>
</div>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467168/9808e8b4-fabd-129f-7b4e-cfe78e29a470.png)
終わり。

### レーダーチャート

ゲームのステータスのようなレーダーチャートを作成してみる。

```typescript:radar-chart.component.ts
import { Component } from '@angular/core';
import { ChartDataSets, ChartType, RadialChartOptions } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'app-radar-chart',
  templateUrl: './radar-chart.component.html',
  styleUrls: ['./radar-chart.component.css']
})
export class RadarChartComponent {
  radarChartOptions: RadialChartOptions = {
    responsive: true,
  };
  radarChartLabels: Label[] = [
    '知識', '度胸', '器用さ', '優しさ', '魅力'
  ];
  radarChartData: ChartDataSets[] = [
    { data: [0, 5, 8, 3, 4], label: '人間パラメータ' }
  ];
  radarChartType: ChartType = 'radar';
}

```

```html:radar-chart.component.html
<div>
  <canvas baseChart
    [datasets]="radarChartData"
    [options]="radarChartOptions"
    [labels]="radarChartLabels"
    [chartType]="radarChartType">
  </canvas>
</div>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467168/ae8c8482-519b-e8fa-7d74-774050027d39.png)

終わり。

### バブルチャート

```typescript:bubble-chart.component.ts
import { Component } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Color } from 'ng2-charts';

@Component({
  selector: 'app-bubble-chart',
  templateUrl: './bubble-chart.component.html',
  styleUrls: ['./bubble-chart.component.css']
})
export class BubbleChartComponent {

  bubbleChartOptions: ChartOptions = {
    title: {
      display: true,
      text: '株投資'
    },
    responsive: true,
    scales: {
      xAxes: [{
        ticks: {
          min: 0,
          max: 50,
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 50,
        }
      }]
    }
  };
  bubbleChartType: ChartType = 'bubble';
  bubbleChartLegend = true;
  bubbleChartData: ChartDataSets[] = [
    {
      data: [
        { x: 10, y: 10, r: 80 },
        { x: 20, y: 30, r: 70 },
        { x: 30, y: 20, r: 60 },
        { x: 40, y: 30, r: 50 },
        { x: 50, y: 5, r: 40 },
      ],
      label: '株投資'
    }
  ];

}

```

```html:bubble-chart.component.html
<div class="chart-wrapper">
  <canvas baseChart
  [datasets]="bubbleChartData"
  [options]="bubbleChartOptions"
  [legend]="bubbleChartLegend"
  [chartType]="bubbleChartType">
</canvas>
</div>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467168/d9cdbfd2-05ac-e35d-1dc6-f084a6fb996c.png)

終わり。