Chart.jsでグラフを描画してみた ２

# 1. はじめに

この記事は、以前に投稿した記事 [Chart.jsでグラフを描画してみた] (https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369) の続きになります。

今回は、以下グラフの描画方法を紹介します。

- ドーナツチャート
- 鶏頭図
- バブルチャート
- 面グラフ
- 混合チャート

Chart.jsの基本的な使用方法は、以前の記事の「2. 記述形式」をご参照ください。

Qiita記事： [Chart.jsでグラフを描画してみた] (https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369)


# 2. グラフ描画

ここからは、ベースとなるhtml（chart.html）が用意されている前提で説明を進めます。
htmlファイルへスクリプトを記述し、グラフを描画します。

## 2-1. ドーナツチャート

ドーナツチャートを表示するサンプルを示します。

```chart.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
　<title>グラフ</title> 
</head>
<body>
  <h1>ドーナツチャート</h1>
  <canvas id="myPieChart"></canvas>
  <!-- CDN -->
　<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

  <script>
  var ctx = document.getElementById("myPieChart");
  var myPieChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["A型", "O型", "B型", "AB型"],
      datasets: [{
          backgroundColor: [
              "#BB5179",
              "#FAFF67",
              "#58A27C",
              "#3C00FF"
          ],
          data: [38, 31, 21, 10]
      }]
    },
    options: {
      title: {
        display: true,
        text: '血液型 割合'
      }
    }
  });
  </script>

</body>
</html>
```

以下のようなグラフが描画されます。
今回は、ドーナツチャートを使用して、血液型の割合を表示しています。

![スクリーンショット 2019-03-29 15.35.24.png](https://qiita-image-store.s3.amazonaws.com/0/174250/a0267f89-ec2c-6a86-d75e-672918b6d9b6.png)


### 解説
サンプル（chart.html）について、scripts要素に焦点をあてて解説します。

- グラフ・タイプ

グラフタイプは、**type**で設定します。
ドーナツチャートを描画する場合、**type**に*'doughnut'*を指定します。

```js
type: 'doughnut',
```

- データ

グラフに描画するデータは、**data**で設定します。

```js
data: {
  labels: ["A型", "O型", "B型", "AB型"],
  datasets: [{
    backgroundColor: [
      "#BB5179",
      "#FAFF67",
      "#58A27C",
      "#3C00FF"
    ],
    data: [38, 31, 21, 10]
  }]
},
```

**data**にて、**labels**、**datasets**の２つの項目を設定します。

|設定項目|設定内容|
|:-----:|:------:|
|**labels**|データの軸ラベル|
|**datasets**|データセット|

**labels**には、*'A型'*、*'O型'*、*'B型'*、*'AB型'* の血液型のラベルを設定します。
**datasets**で、データセットを設定していきます。

【**datasets** 設定】
**datasets**では、**backgroundColor**、**data**の2つの項目を設定します。
各項目で設定できる内容は、以下の通りです。

|**datasets**設定項目|設定内容|
|:-----:|:------:|
|**data**|データの値|
|**backgroundColor**|ドーナツチャートの色|

**data**には、データの値として、*'A型'*、*'O型'*、*'B型'*、*'AB型'* の割合(%)を配列で設定します。

**backgroundColor**では、ドーナツチャートの色として、
*'A型'*を*紅色(#BB5179)*、
*'O型'*を*黄色（#FAFF67）*、
*'B型'*を*緑色（#58A27C）*、
*'AB型'*を*青色（#3C00FF）*に設定します。


- オプション設定

グラフのオプションは、**options**で設定します。

```js
options: {
  title: {
    display: true,
    text: '血液型 割合'
  }
}
```

**options**では、**title**を設定します。
各項目で設定できる内容は、以下の通りです。

|**options**設定項目|設定内容|
|:-----:|:------:|
|**title**|グラフのタイトル|

**title**にて、グラフのタイトルについて設定しています。

【**title** 設定】
**title**では、**display**、**text**の2つの項目を設定します。
各項目で設定できる内容は、以下の通りです。

|title設定項目|設定内容|
|:-----:|:------:|
|**display**|タイトル表示の有無|
|**text**|タイトル|

**display**にて、タイトルが表示されるるように*'true'*を設定します。
**text**には、タイトルとして*'血液型 割合'*を設定します。

以上の設定により、ドーナツチャートを描画することができました。
ドーナツチャート描画の詳細は、以下リンク先を参照ください。

Chart.js 日本語ドキュメント ドーナツチャートと円グラフ
https://misc.0o0o.org/chartjs-doc-ja/charts/doughnut.html


## 2-2. 鶏頭図

鶏頭図を表示するサンプルを示します。

```chart.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
　<title>グラフ</title> 
</head>
<body>
  <h1>鶏頭図</h1>
  <canvas id="myPolarAreaChart"></canvas>
  <!-- CDN -->
　<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

  <script>
  var ctx = document.getElementById("myPolarAreaChart");
  var myPolarAreaChart = new Chart(ctx, {
    type: 'polarArea',
    data: {
      labels: ["1月", "2月", "3月", "4月","5月", "6月", "7月", "8月","9月", "10月", "11月", "12月"],
      datasets: [{
          backgroundColor: [
              "#800080", //パープル
              "#FF1493", //ディープピンク
              "#FF0000", //レッド
              "#FF8C00", //ダークオレンジ
              "#FFD700", //ゴールド
              "#FFFF00", //イエロー
              "#00FF00", //ライム
              "#40E0D0", //トルコ石
              "#00BFFF", //ディープスカイブルー
              "#0000FF", //ブルー
              "#6A5ACD", //スレートブルー
              "#9400D3" //ダークバイオレット
          ],
          data: [18, 17, 12, 10, 3, 2, 4, 6, 5, 9, 11, 19]
      }]
    },
    options: {
      title: {
        display: true,
        text:'月別 クラス病欠者数'
      }
    }
  });
  </script>

</body>
</html>

```

以下のようなグラフが描画されます。
今回は、鶏頭図を使用して、月別 クラス病欠者数を表示しています。

![スクリーンショット 2019-04-01 17.11.35.png](https://qiita-image-store.s3.amazonaws.com/0/174250/40afa591-f304-3325-5106-774cb6bfe93b.png)


### 解説

サンプル（chart.html）について、scripts要素に焦点をあてて解説します。

- グラフ・タイプ

グラフタイプは、**type**で設定します。
鶏頭図を描画する場合、**type**に*'polarArea'*を指定します。

```js
type: 'polarArea',
```

- データ

グラフに描画するデータは、**data**で設定します。

```js
data: {
  labels: ["1月", "2月", "3月", "4月","5月", "6月", "7月", "8月","9月", "10月", "11月", "12月"],
  datasets: [{
    backgroundColor: [
      "#800080", //パープル
      "#FF1493", //ディープピンク
      "#FF0000", //レッド
      "#FF8C00", //ダークオレンジ
      "#FFD700", //ゴールド
      "#FFFF00", //イエロー
      "#00FF00", //ライム
      "#40E0D0", //トルコ石
      "#00BFFF", //ディープスカイブルー
      "#0000FF", //ブルー
      "#6A5ACD", //スレートブルー
      "#9400D3" //ダークバイオレット
    ],
    data: [18, 17, 12, 10, 3, 2, 4, 6, 5, 9, 11, 19]
  }]
},
```

**data**にて、**labels**、**datasets**の２つの項目を設定します。

|設定項目|設定内容|
|:-----:|:------:|
|**labels**|データの軸ラベル|
|**datasets**|データセット|

**labels**には、*'1月'*、*'2月'*、*'3月'*、*'4月'*、*'5月'*、*'6月'*、*'7月'*、*'8月'*、*'9月'*、*'10月'*、*'11月'*、*'12月'* の月のラベルを設定します。
**datasets**で、データセットを設定していきます。

【**datasets** 設定】
**datasets**では、**backgroundColor**、**data**の2つの項目を設定します。
各項目で設定できる内容は、以下の通りです。

|**datasets**設定項目|設定内容|
|:-----:|:------:|
|**backgroundColor**|鶏頭図の塗りつぶしの色|
|**data**|データの値|

**backgroundColor**では、鶏頭図の色として、
*'1月'*を*パープル(#800080)*、
*'2月'*を*ディープピンク(#FF1493）*、
*'3月'*を*レッド(#FF0000)*、
*'4月'*を*ダークオレンジ(#FF8C00)*、
*'5月'*を*ゴールド(#FFD700)*、
*'6月'*を*イエロー(#FFFF00)*、
*'7月'*を*ライム(#00FF00)*、
*'8月'*を*トルコ石(#40E0D0)*、
*'9月'*を*ディープスカイブルー(#00BFFF)*、
*'10月'*を*ブルー(#0000FF)*、
*'11月'*を*スレートブルー(#6A5ACD)*、
*'12月'*を*ダークバイオレット(#9400D3)*に設定します。

**data**では、データの値として、*'1月'*〜*'12月'*それぞれの病欠者数を配列で設定します。

- オプション設定

グラフのオプションは、**options**で設定します。

```js
options: {
  title: {
    display: true,
    text:'月別 クラス病欠者数'
  }
}
```

**options**では、**title**を設定します。

|**options**設定項目|設定内容|
|:-----:|:------:|
|**title**|グラフのタイトル|

**title**にて、グラフのタイトルについて設定しています。

【**title** 設定】
**title**では、**display**、**text**の2つの項目を設定します。
各項目で設定できる内容は、以下の通りです。

| **title**設定項目 | 設定内容 |
|:--:|:--:|
| **display** | タイトル表示の有無|
| **text** | タイトル |

**display**にて、タイトルが表示されるように*'true'*を設定します。
**text**には、タイトルとして*'月別 クラス病欠者数'*を設定します。


以上の設定により、鶏頭図を描画することができました。
鶏頭図描画の詳細は、以下リンク先を参照ください。

Chart.js 日本語ドキュメント 鶏頭図
https://misc.0o0o.org/chartjs-doc-ja/charts/polar.html


## 2-3. バブルチャート

バブルチャートを表示するサンプルを示します。

```chart.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
　　 <title>グラフ</title> 
</head>
  <body>
　　 <h1>バブルチャート</h1>
    <canvas id="myBubbleChart"></canvas>
    <!-- CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

    <script>
    var ctx = document.getElementById("myBubbleChart");
    var myBubbleChart = new Chart(ctx, {
        type: 'bubble',
        data: {
            datasets: [
                {
                    label:"店系列A",
                    backgroundColor: "rgba(219,39,91,0.5)",
                    data:[
                        {x: 1500,y: 60,r: 35},
                        {x: 2500,y: 20,r: 30},
                        {x: 1000,y: 70,r: 25},
                        {x: 3000,y: 40,r: 30},
                        {x: 2000,y: 30,r: 40}
                    ]
                },
                {
                    label:"店系列B",
                    backgroundColor: "rgba(0,39,91,0.5)",
                    data:[
                        {x: 3500,y: 50,r: 15},
                        {x: 1500,y: 25,r: 30},
                        {x: 3400,y: 40,r: 25},
                        {x: 1200,y: 15,r: 10},
                        {x: 2500,y: 55,r: 40}
                    ]
                }
            ]
        },
        options: {
            title: {
                display: true,
                text: '店舗別売上状況'
            },
            scales: {
                xAxes: [{
                    scaleLabel:{
                        display: true,
                        labelString: "店舗面積"
                    },
                    ticks: {
                        suggestedMax: 5000,
                        suggestedMin: 0,
                        stepSize: 1000,
                        callback: function(value, index, values){
                            return  value +  '㎡'
                        }
                    }
                }],
                yAxes: [{
                    scaleLabel:{
                        display: true,
                        labelString: "利益率"
                    },
                    ticks: {
                        suggestedMax: 80,
                        suggestedMin: 0,
                        stepSize: 10,
                        callback: function(value, index, values){
                            return  value +  '%'
                        }
                    }
                }]
            }
        }
    })
    </script>

  </body>
</html>
```

以下のようなグラフが描画されます。
今回は、バブルチャートを使用して、店舗別売上状況を表示しています。

![スクリーンショット 2019-04-02 16.50.50.png](https://qiita-image-store.s3.amazonaws.com/0/174250/8e1a839e-eac1-49b5-a667-310080b62e0f.png)


### 解説

サンプル（chart.html）について、scripts要素に焦点をあてて解説します。

- グラフ・タイプ

グラフタイプは、**type**で設定します。
鶏頭図を描画する場合、**type**に*'bubble'*を指定します。

```js
type: 'bubble',
```

- データ

グラフに描画するデータは、**data**で設定します。

```js
data: {
  datasets: [
    {
      label:"店系列A",
      backgroundColor: "rgba(219,39,91,0.5)",
      data:[
        {x: 1500,y: 60,r: 35},
        {x: 2500,y: 20,r: 30},
        {x: 1000,y: 70,r: 25},
        {x: 3000,y: 40,r: 30},
        {x: 2000,y: 30,r: 40}
      ]
    },
    {
      label:"店系列B",
      backgroundColor: "rgba(0,39,91,0.5)",
      data:[
        {x: 3500,y: 50,r: 15},
        {x: 1500,y: 25,r: 30},
        {x: 3400,y: 40,r: 25},
        {x: 1200,y: 15,r: 10},
        {x: 2500,y: 55,r: 40}
      ]
    }
  ]
},
```

**data**にて、**datasets**を設定します。

|設定項目|設定内容|
|:-----:|:------:|
|**datasets**|データセット|

**labels**には、*"店系列A"*、*"店系列B"*を設定します。
**datasets**で、データセットを設定していきます。

【**datasets** 設定】
**datasets**では、**label**、**backgroundColor**、**data**の3つの項目を設定します。
各項目で設定できる内容は、以下の通りです。

|**datasets**設定項目|設定内容|
|:-----:|:------:|
|**label**|データのラベル|
|**backgroundColor**|塗りつぶしの色|
|**data**|データの値|

**label**では、データのラベルとして、*'店系列A'*、*'店系列B'*を設定します。

**backgroundColor**では、
*'店系列A'*のバブルが*'ピンク（rgba(219,39,91,0.5)）'*に、
*'店系列B'*のバブルが*'ブラック（rgba(0,39,91,0.5)）'*になるようにします。

**data**には、データの値として、*'店系列A'*と*'店系列B'*の店舗面積・利益率・売上状況の値をそれぞれ配列で設定します。
バブルチャートにおいて、データとして x・y・r の3つの値を設定しています。

|値|内容|
|:---:|:---:|
|**x**|X値|
|**y**|Y値|
|**r**|バブル半径(※ ピクセル単位。スケールされないので注意)|

- オプション設定

グラフのオプションは、**options**で設定します。

```js
options: {
  title: {
    display: true,
    text: '店舗別売上状況'
  },
  scales: {
    xAxes: [{
      scaleLabel:{
        display: true,
        labelString: "店舗面積"
      },
      ticks: {
        suggestedMax: 5000,
        suggestedMin: 0,
        stepSize: 1000,
        callback: function(value, index, values){
          return  value +  '㎡'
        }
      }
    }],
    yAxes: [{
      scaleLabel:{
        display: true,
        labelString: "利益率"
      },
      ticks: {
        suggestedMax: 80,
        suggestedMin: 0,
        stepSize: 10,
        callback: function(value, index, values){
          return  value +  '%'
        }
      }
    }]
  }
}
```

**options**では、**title**、**scales**を設定します。
各項目で設定できる内容は、以下の通りです。

|options設定項目|設定内容|
|:---:|:---:|
|**title**|グラフのタイトル|
|**scales**|グラフ軸の詳細（最大値・最小値・刻み幅など）|

**title**にて、グラフのタイトルについて設定しています。
**scales**にて、グラフのy軸の最大値・最小値・刻み幅を設定等を設定しています。

【**title** 設定】
**title**では、**display**、**text**の2つの項目を設定します。

| **title**設定項目 | 設定内容 |
|:--:|:--:|
| **display** | タイトル表示の有無 |
| **text** | タイトル |

**display**にて、タイトルが表示されるるように*'true'*を設定します。
**text**には、タイトルとして*'店舗別売上状況'*を設定します。

【**scale** 設定】
グラフを適切に表示させるため、x軸・y軸を設定します。

x軸の設定は、**xAxes**、y軸の設定は、**yAxes**で行います。

各軸のラベルは、**scaleLabel**で設定します。
**scaleLabel**では、**display**、**labelString**の2つの項目を設定します。
各項目で設定できる内容は以下の通りです。

|**scaleLabel**設定項目|	設定内容|
|:--:|:--:|
|**display**|軸ラベル表示の有無|
|**labelString**|軸ラベル|

x軸では、**display**にて、軸ラベルが表示されるるように*'true'*を設定します。
**labelString**には、軸ラベルとして*'店舗面積'*を設定します。

y軸では、**display**にて、軸ラベルが表示されるるように*'true'*を設定します。
**labelString**には、軸ラベルとして*'利益率'*を設定します。

さらに、軸の目盛線についてそれぞれ設定したいので、**ticks**を使用します。
**ticks**では、**suggestedMax**、**suggestedMin**、**stepSize**、**callback**の3つの項目を設定します。
各項目で設定できる内容は、以下の通りです。

|ticks設定項目|	設定内容|
|:--:|:--:|
|**suggestedMax**|軸の最大値。※自動フィット機能を維持|
|**suggestedMin**|軸の最小値。※自動フィット機能を維持|
|**stepSize**|軸の刻み幅|
|**callback**|軸のラベル|

x軸では、最大値として**suggestedMax**を*5000*、最小値として**suggestedMin**を*０*、刻み幅として、**stepSize**を*1000*に設定しています。
**callback**には、x軸のラベルが*'~㎡'*になるように設定します。

y軸では、最大値として**suggestedMax**を*80*、最小値として**suggestedMin**を*０*、刻み幅として、**stepSize**を*10*に設定しています。
**callbackには**、y軸のラベルが*'~%'*になるように設定します。

以上の設定により、バブルチャートを描画することができました。
バブルチャート描画の詳細は、以下リンク先を参照ください。

Chart.js 日本語ドキュメント バブルチャート
https://misc.0o0o.org/chartjs-doc-ja/charts/bubble.html

## 2-4. 面グラフ

面グラフを表示するサンプルを示します。

```chart.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
　　 <title>グラフ</title> 
</head>
<body>
    <h1>面グラフ</h1>
    <canvas id="myAreaChart"></canvas>
    <!-- CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

    <script>
    var ctx = document.getElementById("myAreaChart");
    var myAreaChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['5月1日', '5月2日', '5月3日', '5月4日', '5月5日', '5月6日', '5月7日'],
            datasets: [
                //データセット0 設定
                {
                    fill: 'origin', //'origin'まで塗る
                    label: '商品A',
                    data: [4, 6, 8, 7, 8, 10, 3],
                    lineTension:0,
                    borderColor: "rgba(199,21,133,1)", //ミディアムバイオレット
                    backgroundColor: "rgba(199,21,133,0.5)"
                },
                // データセット1 設定
                {
                    fill: 0, // データセット0まで塗る
                    label: '商品B',
                    data: [14, 18, 22, 25, 26, 21, 13],
                    lineTension:0,
                    borderColor: "rgba(255,243,82,1)", //レモンイエロー
                    backgroundColor: "rgba(255,243,82,0.5)"
                },
                // データセット2 設定
                {
                    fill: 1, // データセット1sまで塗る
                    label: '商品C',
                    data: [35, 34, 37, 35, 34, 35, 29],
                    lineTension:0,
                    borderColor: "rgba(0,172,154,1)", //ペパーミントグリーン
                    backgroundColor: "rgba(0,172,154,0.5)"
                }
               
            ]
        },
        options: {
            title: {
                display: true,
                text: '商品別 売上数'
            },
            scales: {
                yAxes: [{
                    ticks: {
                        suggestedMax: 40,
                        suggestedMin: 0,
                        stepSize: 10
                    }
                }]
            },
            plugins: {
                filler: {
                    propagate: true
                }
            }
        }
    });
    </script>

  </body>
</html>
```

以下のようなグラフが描画されます。
今回は、面グラフを使用して、商品別 売上状況を表示しています。

![スクリーンショット 2019-04-03 17.42.21.png](https://qiita-image-store.s3.amazonaws.com/0/174250/e9ec359c-f32d-3ba6-79e2-a5a984461b6d.png)

### 解説

サンプル（chart.html）について、scripts要素に焦点をあてて解説します。

- グラフ・タイプ

グラフタイプは、**type**で設定します。
面グラフを描画する場合、**type**に*'line'*を指定します。
※ 折れ線グラフを描画するときに使用したタイプと同じものを使用します。

```js
type: 'line',
```

- データ

グラフに描画するデータは、**data**で設定します。

```js
data: {
  labels: ['5月1日', '5月2日', '5月3日', '5月4日', '5月5日', '5月6日', '5月7日'],
  datasets: [
    //データセット0 設定
    {
      fill: 'origin', //'origin'まで塗る
      label: '商品A',
      data: [4, 6, 8, 7, 8, 10, 3],
      lineTension:0,
      borderColor: "rgba(199,21,133,1)", //ミディアムバイオレット
      backgroundColor: "rgba(199,21,133,0.5)"
    },
    // データセット1 設定 
    {
      fill: 0, // データセット0まで塗る
      label: '商品B',
      data: [14, 18, 22, 25, 26, 21, 13],
      lineTension:0,
      borderColor: "rgba(255,243,82,1)", //レモンイエロー
      backgroundColor: "rgba(255,243,82,0.5)"
    },
    // データセット2 設定
    {
      fill: 1, // データセット1まで塗る
      label: '商品C',
      data: [35, 34, 37, 35, 34, 35, 29],
      lineTension:0,
      borderColor: "rgba(0,172,154,1)", //ペパーミントグリーン
      backgroundColor: "rgba(0,172,154,0.5)"
    }
  ]
},
```

**data**にて、**labels**、**datasets**の2つの項目を設定します。
各項目で設定できる内容は、以下の通りです。

|設定項目|設定内容|
|:-----:|:------:|
|**labels**|データの軸ラベル|
|**datasets**|データセット|


**labels**には、*'5月1日'*, *'5月2日'*, *'5月3日'*, *'5月4日'*, *'5月5日'*,*'5月6日'*, *'5月7日'*を設定します。
**datasets**で、データセットを設定していきます。

【**datasets** 設定】
**datasets**では、**fill**、**label**、**data**、**lineTension**、**borderColor**、**backgroundColor**の6つの項目を設定します。
各項目で設定できる内容は、以下の通りです。

|**datasets**設定項目|設定内容|
|:-----:|:------:|
|**fill**|線の下の塗りつぶしの領域|
|**label**|データの凡例|
|**data**|データの値|
|**lineTension**|線のベジェ曲線の張力(※ *0*に設定すると、直線になる）|
|**borderColor**|線の色|
|**backgroundColor**|線の下の塗りつぶしの色|

**fill**では、面の領域（線の下の塗りつぶしの領域)として、
**データセット0**(*'商品A'*)は線~*origin*まで、
**データセット1**(*'商品B'*)は線~データセット0(*0*)まで、
**データセット2**(*'商品C'*)は線~データセット1(*1*)までとなるように設定します。

**label**にて、データの凡例*'商品A'*・*'商品B'*・*'商品C'*を設定しています。

**data**には、データの値として、*'商品A'*・*'商品B'*・*'商品C'*の *5月1日*〜*5月7日*の売上の値をそれぞれ配列で設定します。

**lineTension**では、折れ線グラフの線が直線で表示されるように*0*を設定します。

**borderColor**では、折れ線グラフの線の色として、
*'商品A'*ではミディアムバイオレット(*rgba(199,21,133,1)*)、
*'商品B'*ではレモンイエロー(*rgba(255,243,82,1)*)、
*'商品C'*ではペパーミントグリーン(*rgba(0,172,154,1)*)に設定します。

**backgroundColor**では、折れ線グラフの線の下の塗りつぶしの色が、
*'商品A'*ではミディアムバイオレット(*rgba(199,21,133,0.5)*)、
*'商品B'*ではレモンイエロー(*rgba(255,243,82,0.5)*)、
*'商品C'*ではペパーミントグリーン(*rgba(0,172,154,0.5)*)になるように設定します。



- オプション設定

グラフのオプションは、**options**で設定します。

```js
options: {
  title: {
    display: true,
    text: '商品別 売上数'
  },
  scales: {
    yAxes: [{
      ticks: {
        suggestedMax: 40,
        suggestedMin: 0,
        stepSize: 10
      }
    }]
  },
  plugins: {
    filler: {
      propagate: true
    }
  }
}
```

**options**では、**title**、**scales**、**plugin**を設定します。
各項目で設定できる内容は、以下の通りです。

|**options**設定項目|設定内容|
|:-----:|:------:|
| **plugin** | プラグインの設定（ここでは、ターゲットが非表示のときの塗りつぶしを設定するために使用） |
|**title**|グラフのタイトル|
|**scales** | グラフ軸の詳細（最大値・最小値・刻み幅など） |

**title**にて、グラフのタイトルについて設定しています。
**scales**にて、グラフのy軸の最大値・最小値・刻み幅を設定等を設定しています。
**plugin**にて、グラフのプラグインを設定します。

【**title** 設定】
**title**では、**display**、**text**の2つの項目を設定します。

| **title**設定項目 | 設定内容 |
|:--:|:--:|
| **display** | タイトル表示の有無 |
| **text** | タイトル |

**display**にて、タイトルが表示されるるように*'true'*を設定します。
**text**には、タイトルとして*'商品別 売上数'*を設定します。

【**scale** 設定】
グラフを適切に表示させるため、y軸を設定します。

y軸の設定は、**yAxes**で行います。
さらに、y軸の目盛線について設定したいので、**ticks**を使用します。

**ticks**では、**suggestedMax**、**suggestedMin**、**stepSize**の3つの項目を設定します。
各項目で設定できる内容は、以下の通りです。

|ticks設定項目|	設定内容|
|:--:|:--:|
|**suggestedMax**|軸の最大値。※自動フィット機能を維持|
|**suggestedMin**|軸の最小値。※自動フィット機能を維持|
|**stepSize**|軸の刻み幅|

軸の最大値として、**suggestedMax**を*40*、最小値として、**suggestedMin**を*０*、刻み幅として、**stepSize**を*10*に設定しています。

【**plugin** 設定】
**plugin**では、**filler.propagate**を設定します。

|**plugin**設定項目| 設定内容 |
|:--:|:--:|
|**filler.propagate**|データセットが非表示の時の塗りつぶし領域の拡張有無（※*true*だと、非表示のデータセットのfill値によって定義された値まで、塗りつぶし領域が再帰的に拡張される。）|

以上の設定により、面グラフを描画することができました。
面グラフ描画の詳細は、以下リンク先を参照ください。

Chart.js 日本語ドキュメント 面グラフ
https://misc.0o0o.org/chartjs-doc-ja/charts/area.html

## 2-5. 混合チャート

混合チャートを表示するサンプルを示します。

```chart.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
　<title>グラフ</title> 
</head>
<body>
  <h1>混合チャート</h1>
  <canvas id="myMixedChart"></canvas>
  <!-- CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

  <script>
  var ctx = document.getElementById("myMixedChart");
  var myMixedChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['6月1日', '6月2日', '6月3日', '6月4日','6月5日','6月6日','6月7日'],
        datasets: [{
            //棒グラフ
            label: "売上",
            data: [30, 45, 40, 35, 30, 40, 30],
            backgroundColor: "rgba(0,0,128,0.5)", 
            yAxisID: 'left-y-axis'
        }, {
            //折れ線グラフ
            label: "客数",
            type: 'line',
            data: [1400, 1550, 1470, 1390, 1500, 1480, 1420],
            borderColor: "rgba(255,255,0,1)",
            backgroundColor: "rgba(0,0,0,0)",
            yAxisID: 'right-y-axis'
        }]
    },
    options: {
      title: {
        display: true,
        text: '客数・売上 状況'
      },
      scales: {
            yAxes: [
                {
                  id: 'left-y-axis',
                  position: 'left',
                  ticks: {
                    suggestedMax: 50,
                    suggestedMin: 0,
                    stepSize: 10,
                    callback: function(value, index, values){
                      return  value +  '万円'
                    }
                  }
              }, {
                  id: 'right-y-axis',
                  position: 'right',
                  ticks: {
                    suggestedMax: 500,
                    suggestedMin: 0,
                    stepSize: 100,
                    callback: function(value, index, values){
                      return  value +  '人'
                    }
                  },
                  // グリッドラインを消す
                  gridLines: {
                    drawOnChartArea: false, 
                  },
              }
           ]
        }
     }
  });
  </script>
</body>

</html>
```

以下のようなグラフが描画されます。
今回は、混合チャート（棒グラフ・折れ線グラフ）を使用して、客数・売上状況を表示しています。

![スクリーンショット 2019-04-05 17.22.13.png](https://qiita-image-store.s3.amazonaws.com/0/174250/2c975189-c784-9856-4c81-eb9cf5c9f918.png)


### 解説

サンプル（chart.html）について、scripts要素に焦点をあてて解説します。

- グラフ・タイプ

グラフタイプは、**type**で設定します。
今回、混合チャートでは、**棒グラフ**と**折れ線グラフ**を表示します。
まず、ここでは**棒グラフ**を表示するため、**type**に*'bar'*を指定します。

```js
type: 'bar',
```

- データ

グラフに描画するデータは、**data**で設定します。

```js
data: {
  labels: ['6月1日', '6月2日', '6月3日', '6月4日','6月5日','6月6日','6月7日'],
  datasets: [{
    //棒グラフ
    label: "売上",
    data: [30, 45, 40, 35, 30, 40, 30],
    backgroundColor: "rgba(0,0,128,0.5)", 
    yAxisID: 'left-y-axis'
  }, { 
    //折れ線グラフ
    label: "客数",
    type: 'line',
    data: [1400, 1550, 1470, 1390, 1500, 1480, 1420],
    borderColor: "rgba(255,255,0,1)",
    backgroundColor: "rgba(0,0,0,0)",
    yAxisID: 'right-y-axis'
  }]
},
```

**data**にて、**labels**、**datasets**の２つの項目を設定します。
各項目で設定できる内容は、以下の通りです。

|設定項目|設定内容|
|:-----:|:------:|
|**labels**|データの軸ラベル|
|**datasets**|データセット|

**labels**には、*'6月1日'*、 *'6月2日'*、 *'6月3日'*、 *'6月4日'*、*'6月5日'*、*'6月6日'*、*'6月7日'*の日付を設定します。
**datasets**で、データセットを設定していきます。

【**datasets** 設定】
**datasets**では、**棒グラフ**のデータセット と **折れ線グラフ**のデータセット の2つを配列でそれぞれ設定します。
**棒グラフ**・**折れ線グラフ**の各データセットでは、以下の項目を設定します。

・**棒グラフ** データセットでの設定項目
**label**、**data**、**backgroundColor**、**yAxisID**の4つの項目を設定します。
各項目で設定できる内容は、以下の通りです。

|**datasets**設定項目|設定内容|
|:-----:|:------:|
|**label**|データの凡例|
|**data**|データの値|
|**backgroundColor**|塗りつぶしの色|
|**yAxisID**|**棒グラフ** Y軸のid|

**label**にて、データの凡例 *'売上'* を設定しています。
**data**には、データの値として、6月1日~6月7日の売上の値をそれぞれ配列で設定します。
**backgroundColor**では、棒グラフの色として、ネイビー（*rgba(0,0,128,0.5)*）を設定します。
**yAxisID**では、**棒グラフ** Y軸のIDとして*'left-y-axis'*を設定します。
ここで設定したIDに紐づけて、オプション設定でY軸の表示を調節します。


・**折れ線グラフ** データセットでの設定項目
**label**、**type**、**data**、**borderColor**、**backgroundColor**、**yAxisID**の6つの項目を設定します。
各項目で設定できる内容は、以下の通りです。

|**datasets**設定項目|設定内容|
|:-----:|:------:|
|**label**|データの凡例|
|**type**|グラフタイプ|
|**data**|データの値|
|**borderColor**|線の色|
|**backgroundColor**|線の下の塗りつぶしの色|
|**yAxisID**|**折れ線グラフ** Y軸のID|

**label**にて、データの凡例 *'客数'* を設定しています。
**棒グラフ**に加えて、**折れ線グラフ**を表示するため、データセット設定にて**type**に*'line'*を指定します。
**data**には、データの値として、*6月1日*~*6月7日*の客数の値をそれぞれ配列で設定します。
**borderColor**では、折れ線グラフの線の色として、黄色（*rgba(255,255,0,1)*）を設定します。
**backgroundColor**では、折れ線グラフの線の下の塗りつぶしの色が透明（rgba(0,0,0,0)）になるようにします。
**yAxisID**では、**折れ線グラフ** Y軸のIDとして*'right-y-axis'*を設定します。ここで設定したIDに紐づけて、オプション設定でY軸の表示を調節します。

- オプション設定

グラフのオプションは、**options**で設定します。

```js
options: {
  title: {
    display: true,
    text: '客数・売上 状況'
  },
  scales: {
    yAxes: [
      {
        id: 'left-y-axis',
        position: 'left',
        ticks: {
          suggestedMax: 50,
          suggestedMin: 0,
          stepSize: 10,
          callback: function(value, index, values){
            return  value +  '万円'
          }
        }
      }, {
        id: 'right-y-axis',
        position: 'right',
        ticks: {
          suggestedMax: 500,
          suggestedMin: 0,
          stepSize: 100,
          callback: function(value, index, values){
            return  value +  '人'
          }
        },
        // グリッドラインを消す
        gridLines: {
          drawOnChartArea: false, 
        },
      }
    ]
  }
}
```

**options**では、**title**、**scales**を設定します。
各項目で設定できる内容は、以下の通りです。

|**options**設定項目|設定内容|
|:-----:|:------:|
|**title**|グラフのタイトル|
| **scales** | グラフ軸の詳細（最大値・最小値・刻み幅など） |

**title**にて、グラフのタイトルについて設定しています。
**scales**にて、グラフのy軸の最大値・最小値・刻み幅を設定等を設定しています。

【**title** 設定】
**title**では、**display**、**text**の2つの項目を設定します。

| **title**設定項目 | 設定内容 |
|:--:|:--:|
| **display** | タイトル表示の有無 |
| **text** | タイトル |

**display**にて、タイトルが表示されるるように*'true'*を設定します。
**text**には、タイトルとして*'客数・売上 状況'*を設定します。

【**scales** 設定】
グラフを適切に表示させるため、y軸を設定します。

y軸の設定は、**yAxes**で行います。
ここでは、データセットにて設定しID(*yAxisID*)に紐づけて、複数のy軸のオプション設定を行います。

まず、**id**にてIDを指定し、データセットと軸の設定を紐づけます。
**id**として、**棒グラフ**のy軸のID *'right-y-axis'*、**折れ線グラフ**のy軸のID *'left-y-axis'*を指定します。

**id**の他に、**棒グラフ**・**折れ線グラフ**ではそれぞれ以下のオプション項目の設定をします。

・**棒グラフ** でのオプション設定項目

以下項目を設定します。

|棒グラフ_scale設定項目|設定内容|
|:---:|:---:|
|**position**|グラフ内の軸の位置|
|**ticks**|目盛の設定|

**position**は、左側に軸が表示されるように*'left'*を設定します。

**ticks**では、**suggestedMax**、**suggestedMin**、**stepSize**、**callback**の4つの項目を設定します。

|ticks設定項目|	設定内容|
|:--:|:--:|
|**suggestedMax**|軸の最大値。※自動フィット機能を維持|
|**suggestedMin**|軸の最小値。※自動フィット機能を維持|
|**stepSize**|軸の刻み幅|
|**callback**|軸のラベル|

軸の最大値として、**suggestedMax**を*50*、最小値として、**suggestedMin**を*０*、刻み幅として、**stepSize**を*10*に設定しています。
**callback**には、軸のラベルが*'~万円'*になるように設定します。

・**折れ線グラフ** データセットでの設定項目

以下項目を設定します。

|折れ線グラフ_scale設定項目|設定内容|
|:---:|:---:|
|**position**|グラフ内の軸の位置|
|**ticks**|目盛の設定|
|**gridLines**|グリッド線の設定|

**position**は、右側に軸が表示されるように*'right'*を設定します。

**ticks**では、**suggestedMax**、**suggestedMin**、**stepSize**、**callback**の4つの項目を設定します。
各項目で設定できる内容は、以下の通りです。

|ticks設定項目|	設定内容|
|:--:|:--:|
|**suggestedMax**|軸の最大値。※自動フィット機能を維持|
|**suggestedMin**|軸の最小値。※自動フィット機能を維持|
|**stepSize**|軸の刻み幅|
|**callback**|軸のラベル|

軸の最大値として、**suggestedMax**を*500*、最小値として、**suggestedMin**を*０*、刻み幅として、**stepSize**を*100*に設定しています。

**callback**には、軸のラベルが*'~人'*になるように設定します。

**gridLines**では、**drawOnChartArea**を設定します。

|gridLines設定項目|設定内容|
|:---:|:---:|
|**drawOnChartArea**|グリッド線表示の有無|

グリッドラインが表示されないように、**drawOnChartArea**は*'false'*にします。


以上の設定により、混合チャートを描画することができました。
混合チャート描画の詳細は、以下リンク先を参照ください。

Chart.js 日本語ドキュメント 混合チャート
https://misc.0o0o.org/chartjs-doc-ja/charts/mixed.html

また複数軸の設定方法については、以下リンク先をご参照ください。

Chart.js 日本語ドキュメント 直交座標系
https://misc.0o0o.org/chartjs-doc-ja/axes/cartesian/

# 3. おわりに

今回は、Chart.jsを使用して、**ドーナツチャート**、**鶏頭図**、**バブルチャート**、**面グラフ**、**混合チャート**の５種類のグラフの描画方法を紹介しました。

以前にChart.jsについての記事を投稿して、比較的 想像以上のPVが集まったので、注目されているライブラリーなのだなといった感触を得ました。

また、**折れ線グラフ**、**棒グラフ**、**円グラフ**、**レーダーチャート**、**散布図**の描画方法は、以前投稿した記事の「3. グラフ描画」で紹介していますので、そちらもご参照いただければと思います。

Qiita記事： [Chart.jsでグラフを描画してみた](https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369)

# 参考情報

公式ホームページ
http://www.chartjs.org/

cdnjs: Chart.js
https://cdnjs.com/libraries/Chart.js/

ドットインストール： Chart.js入門
https://dotinstall.com/lessons/basic_chartjs