コピペで！「Chart.js」を使って円・ドーナツグラフを表示する

2020-05-132020-05-21Otherプラグイン不要

軽量で簡単に実装できる「Chart.js」を使った円グラフと、ドーナツチャートの表示方法についてです。

「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。
それらを組み合わせた混合チャートも可能です。

様々なグラフのサンプルは公式サイトで見る事が出来ます。

Chart.js（公式サイト）
Chart.js ドキュメント

チャートの設定方法

type：描画するグラフの種類
data：ラベルとデータセット
options：オプション設定

グラフの種類は「type」で指定します。

それぞれの詳細な使い方記事は、以下の表内リンクから。

表示サンプル	type	グラフの種類
	radar	レーダーチャート
	line	折れ線グラフ
	bar	棒グラフ
	pie	円グラフ
	polarArea	ポーラーチャート
	doughnut	ドーナツ
	scatter	散布図
	bubble	バブルチャート

棒＋折れ線の複合チャート　の　詳細はこちら

グラフの表示サンプル、実際のホバーアクションなどは以下をご覧ください。

「Chart.js」を使ったグラフサンプル７種と使い方 | 綾糸.net・セカンド

「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に ...

https://sec.ayaito.net/web/16587/

円グラフ・ドーナツチャート

今回は、円グラフ　type: 'pie’　と　ドーナツチャート　type: 'doughnut’　の実装方法です。

この２つのグラフはタイプ（グラフの種類）設定以外、共通のコードで実装出来ます。

コピペで使って頂けるようにコードを紹介します。

手順

Chart.jsを読み込むコードを記述（１行のみ<head>または<body>内に）
JavaScriptを記述（データやデザイン設定）
HTMLを記述（１行のみのグラフ表示用タグ）

これだけです！

では順番に・・

Chart.jsを読み込む

サイト内の色々なページでグラフ表示する

サイトの<head>～</head>内

特定のページのみでしか利用しない場合

そのページの<body>内でもOK

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

JavaScriptを記述

注意点

記載しているコードの<script>タグ（閉じる</script>も）は、不要な場合もあります。たとえば、WordPressでJavaScriptを記述するエリアがあり、そこに記述する場合は不要。（Cocoonの記事内「カスタムJavaScript」などでも不要）

表示したいページに記述します。

円グラフ

コードを表示

<script>
  var ctx = document.getElementById("myPieChart");
  var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ["賛成", "反対", "わからない", "未回答"], //データ項目のラベル
      datasets: [{
          backgroundColor: [
              "#c97586",
              "#bbbcde",
              "#93b881",
              "#e6b422"
          ],
          data: [45, 32, 18, 5] //グラフのデータ
      }]
    },
    options: {
      title: {
        display: true,
        //グラフタイトル
        text: '新法案賛否'
      }
    }
  });
</script>

ドーナツチャート

コードを表示

<script>
  var ctx = document.getElementById("myDoughnutChart");
  var myDoughnutChart= new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["賛成", "反対", "わからない", "未回答"], //データ項目のラベル
      datasets: [{
          backgroundColor: [
              "#c97586",
              "#bbbcde",
              "#93b881",
              "#e6b422"
          ],
          data: [45, 32, 18, 5] //グラフのデータ
      }]
    },
    options: {
      title: {
        display: true,
        //グラフタイトル
        text: '新法案賛否'
      }
    }
  });
</script>