More than 1 year has passed since last update.

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

Last updated at 2022-10-11Posted at 2019-04-08

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>

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

解説

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

グラフ・タイプ

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

type: 'doughnut',

データ

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

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で設定します。

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>

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

解説

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

グラフ・タイプ

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

type: 'polarArea',

データ

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

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で設定します。

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>

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

解説

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

グラフ・タイプ

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

type: 'bubble',

データ

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

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で設定します。

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>

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

解説

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

グラフ・タイプ

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

type: 'line',

データ

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

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で設定します。

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>

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

解説

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

グラフ・タイプ

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

type: 'bar',

データ

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

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で設定します。

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でグラフを描画してみた

参考情報

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

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

1. はじめに

2. グラフ描画

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

解説

2-2. 鶏頭図

解説

2-3. バブルチャート

解説

2-4. 面グラフ

解説

2-5. 混合チャート

解説

3. おわりに

参考情報

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