コピペで使えるChart.js v3.7.0 スクリプト【円グラフ／ドーナツグラフ／鶏頭図】

2022年2月15日

URLをコピーしました！

Chart.jsを使って円系のグラフを表示するためのスクリプトサンプルです。

割合を示すのに有効なグラフで円グラフやドーナツグラフ、鶏頭図を描画できます。

コピペして流用しやすいよう、データなど書き換えが必要な部分はスクリプトの最初のほうに変数としてまとめて書いています。

ここで掲載しているサンプルはChart.jsの v3.7.0 向けです。

v2.x.x系のようにメジャーバージョンが異なる場合、v.3系でもマイナーバージョンが異なる場合は正しく表示できないものもありますので注意。

円グラフ

よく見る円グラフ。

typeにpieを指定すると円グラフ（パイグラフ）になります。

backgroundColorを必要なデータの要素分設定します。

スクロールできます

項目	概要
backgroundColor	棒グラフ内の塗りつぶしの色を指定する。

グラフのスクリプトを表示

<canvas id="myChart1" style="padding: 10px;"></canvas>
<script>
// 各データののラベル
var datalabels        = ["A", "B", "C", "D", "E"];

// 系列の情報を設定
var series00data      = [ 10, 20, 35, 15, 20]; // データ
var series01bgcolor   = "rgba(255,  99, 132)"; // １つ目の塗りつぶし色
var series02bgcolor   = "rgba(255, 200, 132)"; // ２つ目の塗りつぶし色
var series03bgcolor   = "rgba(132, 255, 200)"; // ３つ目の塗りつぶし色
var series04bgcolor   = "rgba(132, 200, 255)"; // ４つ目の塗りつぶし色
var series05bgcolor   = "rgba(255, 233, 255)"; // ５つ目の塗りつぶし色

var ctx = document.getElementById("myChart1").getContext("2d");
var myChart1 = new Chart(ctx, {
  type: "pie",
  data: {
    labels: datalabels,
    datasets:[
      {
        data:            series00data,
        backgroundColor: [
          series01bgcolor,
          series02bgcolor,
          series03bgcolor,
          series04bgcolor,
          series05bgcolor
        ],
      }
    ]
  },
});
</script>

ドーナツグラフ

円グラフにていますが、円の中心が空白になっているグラフがドーナツグラフ。

円グラフと設定項目は一緒です。

typeにdoughnutを指定するだけで円グラフからドーナツグラフに変更できます。

グラフのスクリプトを表示

<canvas id="myChart2" style="padding: 10px;"></canvas>
<script>
// 各データののラベル
var datalabels        = ["A", "B", "C", "D", "E"];

// 系列の情報を設定
var series00data      = [ 10, 20, 35, 15, 20]; // データ
var series01bgcolor   = "rgba(255,  99, 132)"; // １つ目の塗りつぶし色
var series02bgcolor   = "rgba(255, 200, 132)"; // ２つ目の塗りつぶし色
var series03bgcolor   = "rgba(132, 255, 200)"; // ３つ目の塗りつぶし色
var series04bgcolor   = "rgba(132, 200, 255)"; // ４つ目の塗りつぶし色
var series05bgcolor   = "rgba(255, 233, 255)"; // ５つ目の塗りつぶし色

var ctx = document.getElementById("myChart2").getContext("2d");
var myChart1 = new Chart(ctx, {
  type: "doughnut",
  data: {
    labels: datalabels,
    datasets:[
      {
        data:            series00data,
        backgroundColor: [
          series01bgcolor,
          series02bgcolor,
          series03bgcolor,
          series04bgcolor,
          series05bgcolor
        ],
      }
    ]
  },
});
</script>

鶏頭図

鶏のトサカのように扇を表現する系統図。

割合が大きいデータを強調したい場合に活用できます。

typeにpolarAreaを指定すると鶏頭図になります。

鶏頭図はレーダーチャートのように軸方向の長さでも値を表現するので、scales.rを指定することもできます。

グラフのスクリプトを表示

<canvas id="myChart3" style="padding: 10px;"></canvas>
<script>
// 各データののラベル
var datalabels        = ["A", "B", "C", "D", "E"];

// 系列の情報を設定
var series00data      = [ 10, 20, 35, 15, 20]; // データ
var series01bgcolor   = "rgba(255,  99, 132)"; // １つ目の塗りつぶし色
var series02bgcolor   = "rgba(255, 200, 132)"; // ２つ目の塗りつぶし色
var series03bgcolor   = "rgba(132, 255, 200)"; // ３つ目の塗りつぶし色
var series04bgcolor   = "rgba(132, 200, 255)"; // ４つ目の塗りつぶし色
var series05bgcolor   = "rgba(255, 233, 255)"; // ５つ目の塗りつぶし色

// グラフ縦軸の最大／最小／目盛りの間隔を設定
var rmax  = 50;  // グラフ縦軸の最大
var rmin  =  0;  // グラフ縦軸の最小
var rstep = 10;  // グラフ縦軸の目盛り線を引く間隔

var ctx = document.getElementById("myChart3").getContext("2d");
var myChart1 = new Chart(ctx, {
  type: "polarArea",
  data: {
    labels: datalabels,
    datasets:[
      {
        data:            series00data,
        backgroundColor: [
          series01bgcolor,
          series02bgcolor,
          series03bgcolor,
          series04bgcolor,
          series05bgcolor
        ],
      }
    ]
  },
  options: {
    scales: {
      r: {
        display:      true,
        suggestedMax: rmax,
        suggestedMin: rmin,
        ticks: {
          stepSize: rstep,
        },
      }
    }
  }
});
</script>