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

  • 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)"; // 1つ目の塗りつぶし色
var series02bgcolor   = "rgba(255, 200, 132)"; // 2つ目の塗りつぶし色
var series03bgcolor   = "rgba(132, 255, 200)"; // 3つ目の塗りつぶし色
var series04bgcolor   = "rgba(132, 200, 255)"; // 4つ目の塗りつぶし色
var series05bgcolor   = "rgba(255, 233, 255)"; // 5つ目の塗りつぶし色

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)"; // 1つ目の塗りつぶし色
var series02bgcolor   = "rgba(255, 200, 132)"; // 2つ目の塗りつぶし色
var series03bgcolor   = "rgba(132, 255, 200)"; // 3つ目の塗りつぶし色
var series04bgcolor   = "rgba(132, 200, 255)"; // 4つ目の塗りつぶし色
var series05bgcolor   = "rgba(255, 233, 255)"; // 5つ目の塗りつぶし色

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)"; // 1つ目の塗りつぶし色
var series02bgcolor   = "rgba(255, 200, 132)"; // 2つ目の塗りつぶし色
var series03bgcolor   = "rgba(132, 255, 200)"; // 3つ目の塗りつぶし色
var series04bgcolor   = "rgba(132, 200, 255)"; // 4つ目の塗りつぶし色
var series05bgcolor   = "rgba(255, 233, 255)"; // 5つ目の塗りつぶし色

// グラフ縦軸の最大/最小/目盛りの間隔を設定
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>

ブログ運営にオススメの書籍

SWELL

当サイトではWordPressのテーマとして を利用しています。

よかったらシェアお願いします!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次