コピペで使えるChart.js v3.7.0 スクリプト【棒グラフ】 

  • URLをコピーしました!

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

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

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

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

目次

普通の棒グラフ

基本的な棒グラフ。

typeにbarを指定すると棒グラフを描画できます。

基本的な設定項目は線グラフと同じですが、backgroundColorも設定するようにしましょう。

スクロールできます
項目概要
label系列の名前を指定する。
dataグラフにするデータを「, (カンマ)」区切りで指定する。
borderColor線の色を指定する。
backgroundColor棒グラフ内の塗りつぶしの色を指定する。
グラフのスクリプトを表示
<canvas id="myChart1" style="padding: 10px;"></canvas>
<script>
// 横軸のラベル
var xlabels           = ["A", "B", "C", "D", "E", "F", "G"];

// 1つ目の系列の情報を設定
var series01name      = "データ1";                          // 系列1の名前
var series01data      = [ 10,  40,  10,  40,  10,  40,  10]; // 系列1データ
var series01bgcolor   = "rgba(255, 99, 132, 0.2)";           // 系列1の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)";           // 系列1の線の色
// 2つ目の系列の情報を設定
var series02name      = "データ2";
var series02data      = [ 35,  15,  35,  15,  35,  15,  35];
var series02bgcolor   = "rgba(255, 200, 132, 0.2)";
var series02linecolor = "rgba(255, 200, 132, 1.0)";
// 3つ以上系列を描画する場合は上のセットを追加する

// グラフ縦軸の最大/最小/目盛りの間隔を設定
var ymax  = 50;  // グラフ縦軸の最大
var ymin  =  0;  // グラフ縦軸の最小
var ystep = 10;  // グラフ縦軸の目盛り線を引く間隔

var ctx = document.getElementById("myChart1").getContext("2d");
var myChart1 = new Chart(ctx, {
  type: "bar",
  data: {
    labels: xlabels,
    datasets:[
      {
        label:           series01name,
        data:            series01data,
        backgroundColor: series01bgcolor,
        borderColor:     series01linecolor,
        borderWidth:     1,
      }, 
      {
        label:           series02name,
        data:            series02data,
        backgroundColor: series02bgcolor,
        borderColor:     series02linecolor,
        borderWidth:     1,
      }
      // 3つ以上系列を描画する場合は上のセットを追加する
    ]
  },
  options: {
    scales: {
      y: {
        display:      true,
        suggestedMax: ymax,
        suggestedMin: ymin,
        ticks: {
          stepSize: ystep,
        },
      }
    }
  }
});
</script>

水平棒グラフ

棒グラフを横に表示するのが水平棒グラフ。

縦横の軸を入れ替えるだけで水平棒グラフになります。

スクロールできます
項目概要
axis系列の軸を指定する。
indexAxisデータの基準となる軸を指定する。水平棒グラフの場合は ‘y’ を指定。
グラフのスクリプトを表示
<canvas id="myChart2" style="padding: 10px;"></canvas>
<script>
// 縦軸のラベル
var ylabels           = ["A", "B", "C", "D"];

// 1つ目の系列の情報を設定
var series01name      = "データ1";                          // 系列1の名前
var series01data      = [ 10,  30,  20,  25]; // 系列1データ
var series01bgcolor   = "rgba(255, 99, 132, 0.2)";           // 系列1の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)";           // 系列1の線の色
// 2つ目の系列の情報を設定
var series02name      = "データ2";
var series02data      = [ 35,  15,  35,  15];
var series02bgcolor   = "rgba(255, 200, 132, 0.2)";
var series02linecolor = "rgba(255, 200, 132, 1.0)";
// 3つ目の系列の情報を設定
var series03name      = "データ3";
var series03data      = [ 50,   0,  35,  15];
var series03bgcolor   = "rgba(132, 255, 200, 0.2)";
var series03linecolor = "rgba(132, 255, 200, 1.0)";
// 4つ目の系列の情報を設定
var series04name      = "データ4";
var series04data      = [  5,  55,  10,  45];
var series04bgcolor   = "rgba(132, 200, 255, 0.2)";
var series04linecolor = "rgba(132, 200, 255, 1.0)";
// 5つ以上系列を描画する場合は上のセットを追加する

// グラフ縦軸の最大/最小/目盛りの間隔を設定
var xmax  = 60;  // グラフ縦軸の最大
var xmin  =  0;  // グラフ縦軸の最小
var xstep = 10;  // グラフ縦軸の目盛り線を引く間隔

var ctx = document.getElementById("myChart2").getContext("2d");
var myChart2 = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ylabels,
    datasets:[
      {
        axis:            'y',
        label:           series01name,
        data:            series01data,
        backgroundColor: series01bgcolor,
        borderColor:     series01linecolor,
        borderWidth:     1,
      }, 
      {
        axis:            'y',
        label:           series02name,
        data:            series02data,
        backgroundColor: series02bgcolor,
        borderColor:     series02linecolor,
        borderWidth:     1,
      }, 
      {
        axis:            'y',
        label:           series03name,
        data:            series03data,
        backgroundColor: series03bgcolor,
        borderColor:     series03linecolor,
        borderWidth:     1,
      }, 
      {
        axis:            'y',
        label:           series04name,
        data:            series04data,
        backgroundColor: series04bgcolor,
        borderColor:     series04linecolor,
        borderWidth:     1,
      }
      // 5つ以上系列を描画する場合は上のセットを追加する
    ]
  },
  options: {
    indexAxis: 'y',
    scales: {
      x: {
        display:      true,
        suggestedMax: xmax,
        suggestedMin: xmin,
        ticks: {
          stepSize: xstep,
        },
      },
      y: {
        display:      true,
      }
    }
  }
});
</script>

水平棒グラフ&100%積み上げグラフ

棒グラフも積み上げることができます。

やり方は至って簡単。

stackedを指定して、各データを100%になるように指定するだけです。

スクロールできます
項目概要
stackedtrueを設定することで系列の値を積み上げる。
グラフのスクリプトを表示
<canvas id="myChart3" style="padding: 10px;"></canvas>
<script>
// 縦軸のラベル
var ylabels           = ["A", "B", "C", "D"];

// 1つ目の系列の情報を設定
var series01name      = "データ1";                          // 系列1の名前
var series01data      = [ 10,  30,  20,  25]; // 系列1データ
var series01bgcolor   = "rgba(255, 99, 132, 0.2)";           // 系列1の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)";           // 系列1の線の色
// 2つ目の系列の情報を設定
var series02name      = "データ2";
var series02data      = [ 35,  15,  35,  15];
var series02bgcolor   = "rgba(255, 200, 132, 0.2)";
var series02linecolor = "rgba(255, 200, 132, 1.0)";
// 3つ目の系列の情報を設定
var series03name      = "データ3";
var series03data      = [ 50,   0,  35,  15];
var series03bgcolor   = "rgba(132, 255, 200, 0.2)";
var series03linecolor = "rgba(132, 255, 200, 1.0)";
// 4つ目の系列の情報を設定
var series04name      = "データ4";
var series04data      = [  5,  55,  10,  45];
var series04bgcolor   = "rgba(132, 200, 255, 0.2)";
var series04linecolor = "rgba(132, 200, 255, 1.0)";
// 5つ以上系列を描画する場合は上のセットを追加する

// グラフ縦軸の最大/最小/目盛りの間隔を設定
var xmax  = 100;  // グラフ縦軸の最大
var xmin  =   0;  // グラフ縦軸の最小
var xstep =  10;  // グラフ縦軸の目盛り線を引く間隔

var ctx = document.getElementById("myChart3").getContext("2d");
var myChart3 = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ylabels,
    datasets:[
      {
        axis:            'y',
        label:           series01name,
        data:            series01data,
        backgroundColor: series01bgcolor,
        borderColor:     series01linecolor,
        borderWidth:     1,
      }, 
      {
        axis:            'y',
        label:           series02name,
        data:            series02data,
        backgroundColor: series02bgcolor,
        borderColor:     series02linecolor,
        borderWidth:     1,
      }, 
      {
        axis:            'y',
        label:           series03name,
        data:            series03data,
        backgroundColor: series03bgcolor,
        borderColor:     series03linecolor,
        borderWidth:     1,
      }, 
      {
        axis:            'y',
        label:           series04name,
        data:            series04data,
        backgroundColor: series04bgcolor,
        borderColor:     series04linecolor,
        borderWidth:     1,
      }
      // 5つ以上系列を描画する場合は上のセットを追加する
    ]
  },
  options: {
    indexAxis: 'y',
    scales: {
      x: {
        display:      true,
        stacked:      true,
        suggestedMax: xmax,
        suggestedMin: xmin,
        ticks: {
          stepSize: xstep,
        },
      },
      y: {
        display:      true,
        stacked:      true,
      }
    }
  }
});
</script>

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

SWELL

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

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

コメント

コメントする

目次