MENU

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

ブログ運営
  • URLをコピーしました！

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

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

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

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

グラフタイプにlineを指定すると線グラフが描画されます。

その上でオプションなどを使うことで様々な線形のグラフを表現することができます。

目次

普通の折れ線グラフ

普通の折れ線グラフ。

datasets内に描画するデータの情報を、系列ごとに設定していきます。

系列ひとつに対して最低限次の項目を設定しましょう。

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

// １つ目の系列の情報を設定
var series01name      = "データ１";                          // 系列１の名前
var series01data      = [ 10,  40,  10,  40,  10,  40,  10]; // 系列１データ
var series01bgcolor   = "rgba(255, 99, 132, 0.2)";           // 系列１の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)";           // 系列１の線の色
// ２つ目の系列の情報を設定
var series02name      = "データ２";
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)";
// ３つ以上系列を描画する場合は上のセットを追加する

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

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

線グラフを塗りつぶし（面グラフ）

線グラフを塗りつぶして面グラフとして表示できます。

系列の情報に、塗りつぶすための設定としてbackgroundColorとfillを追加しましょう。

スクロールできます
項目概要
backgroundColor塗りつぶす色を指定する。ほかの系統と重なった時のために透明度を設定しておくと見やすい。
filltrueを指定すると、backgroundColorで設定した色で塗りつぶす。
グラフのスクリプトを表示
<canvas id="myChart2" style="padding: 10px;"></canvas>
<script>
// 横軸のラベル
var xlabels           = ["A", "B", "C", "D", "E", "F", "G"];

// １つ目の系列の情報を設定
var series01name      = "データ１";                          // 系列１の名前
var series01data      = [ 10,  40,  10,  40,  10,  40,  10]; // 系列１データ
var series01bgcolor   = "rgba(255, 99, 132, 0.2)";           // 系列１の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)";           // 系列１の線の色
// ２つ目の系列の情報を設定
var series02name      = "データ２";
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)";
// ３つ以上系列を描画する場合は上のセットを追加する

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

var ctx = document.getElementById("myChart2").getContext("2d");
var myChart1 = new Chart(ctx, {
  type: "line",
  data: {
    labels: xlabels,
    datasets:[
      {
        label:           series01name,
        data:            series01data,
        backgroundColor: series01bgcolor,
        borderColor:     series01linecolor,
        borderWidth:     1,
        fill:            true, // X軸からグラフ線までを塗りつぶし
      }, 
      {
        label:           series02name,
        data:            series02data,
        backgroundColor: series02bgcolor,
        borderColor:     series02linecolor,
        borderWidth:     1,
        fill:            true, // X軸からグラフ線までを塗りつぶし
      }
      // ３つ以上系列を描画する場合は上のセットを追加する
    ]
  },
  options: {
    scales: {
      y: {
        display:      true,
        suggestedMax: ymax,
        suggestedMin: ymin,
        ticks: {
          stepSize: ystep,
        },
      }
    }
  }
});
</script>

グラフの線を曲線にする

データ間を滑らかな曲線で繋ぐことができます。

曲線でデータ間を繋ぐには、オプションとしてtensionを設定します。

スクロールできます
項目概要
tension曲線の強さを指定する。0ならば直線となり、値が大きくなるほどテンションが掛かる。
グラフのスクリプトを表示
<canvas id="myChart3" style="padding: 10px;"></canvas>
<script>
// 横軸のラベル
var xlabels           = ["A", "B", "C", "D", "E", "F", "G"];

// １つ目の系列の情報を設定
var series01name      = "データ１";                          // 系列１の名前
var series01data      = [ 10,  40,  10,  40,  10,  40,  10]; // 系列１データ
var series01bgcolor   = "rgba(255, 99, 132, 0.2)";           // 系列１の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)";           // 系列１の線の色
// ２つ目の系列の情報を設定
var series02name      = "データ２";
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)";
// ３つ以上系列を描画する場合は上のセットを追加する

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

var ctx = document.getElementById("myChart3").getContext("2d");
var myChart1 = new Chart(ctx, {
  type: "line",
  data: {
    labels: xlabels,
    datasets:[
      {
        label:           series01name,
        data:            series01data,
        backgroundColor: series01bgcolor,
        borderColor:     series01linecolor,
        borderWidth:     1,
        fill:            true, // X軸からグラフ線までを塗りつぶし
      }, 
      {
        label:           series02name,
        data:            series02data,
        backgroundColor: series02bgcolor,
        borderColor:     series02linecolor,
        borderWidth:     1,
        fill:            true, // X軸からグラフ線までを塗りつぶし
      }
      // ３つ以上系列を描画する場合は上のセットを追加する
    ]
  },
  options: {
    elements: {
      line: {
        tension: 0.4,          // 0ならば直線
      }
    },
    scales: {
      y: {
        display:      true,
        suggestedMax: ymax,
        suggestedMin: ymin,
        ticks: {
          stepSize: ystep,
        },
      }
    }
  }
});

階段グラフをつくる

線グラフを利用して階段グラフを表現することもできます。

線を繋いだ2点のどちらに階段の高さを合わせるかをsteppedで指定します。

スクロールできます
項目概要
stepped繋いだ2点のうち階段の高さをどちらに合わせるかを指定する。
before ： 左側の値に高さを合わせる
after ： 右側の値に高さを合わせる
middle： 2点の中間で高さを変更する
グラフのスクリプトを表示
<canvas id="myChart4" style="padding: 10px;"></canvas>
<script>
// 横軸のラベル
var xlabels           = ["A", "B", "C", "D", "E", "F", "G"];

// １つ目の系列の情報を設定
var series01name      = "before";                          // 系列１の名前
var series01data      = [ 10,  40,  10,  40,  10,  40,  10]; // 系列１データ
var series01bgcolor   = "rgba(255, 99, 132, 0.2)";           // 系列１の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)";           // 系列１の線の色
// ２つ目の系列の情報を設定
var series02name      = "after";
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)";

// ３つ目の系列の情報を設定
var series03name      = "middele";
var series03data      = [ 30,  45,  40,  25,  35,  40,  35];
var series03bgcolor   = "rgba(132, 200, 200, 0.2)";
var series03linecolor = "rgba(132, 200, 255, 1.0)";
// ４つ以上系列を描画する場合は上のセットを追加する

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

var ctx = document.getElementById("myChart4").getContext("2d");
var myChart1 = new Chart(ctx, {
  type: "line",
  data: {
    labels: xlabels,
    datasets:[
      {
        label:           series01name,
        data:            series01data,
        backgroundColor: series01bgcolor,
        borderColor:     series01linecolor,
        borderWidth:     1,
        fill:            true,
        stepped:         "before",
      }, 
      {
        label:           series02name,
        data:            series02data,
        backgroundColor: series02bgcolor,
        borderColor:     series02linecolor,
        borderWidth:     1,
        fill:            true,
        stepped:         "after",
      },
      {
        label:           series03name,
        data:            series03data,
        backgroundColor: series03bgcolor,
        borderColor:     series03linecolor,
        borderWidth:     1,
        fill:            true,
        stepped:         "middle",
      }
      // ４つ以上系列を描画する場合は上のセットを追加する
    ]
  },
  options: {
    elements: {
      line: {
        tension: 0.4,          // 0ならば直線
      }
    },
    scales: {
      y: {
        display:      true,
        suggestedMax: ymax,
        suggestedMin: ymin,
        ticks: {
          stepSize: ystep,
        },
      }
    }
  }
});
</script>

積み上げ線グラフ

複数の系列を積み上げて描画します。

積み上げるにはstackedにtrueを指定するだけです。

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

// １つ目の系列の情報を設定
var series01name      = "データ１";                          // 系列１の名前
var series01data      = [ 10,  40,  10,  40,  10,  40,  10]; // 系列１データ
var series01bgcolor   = "rgba(255, 99, 132, 0.2)";           // 系列１の塗りつぶし色
var series01linecolor = "rgba(255, 99, 132, 1.0)";           // 系列１の線の色
// ２つ目の系列の情報を設定
var series02name      = "データ２";
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)";
// ３つ以上系列を描画する場合は上のセットを追加する

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

var ctx = document.getElementById("myChart5").getContext("2d");
var myChart1 = new Chart(ctx, {
  type: "line",
  data: {
    labels: xlabels,
    datasets:[
      {
        label:           series01name,
        data:            series01data,
        backgroundColor: series01bgcolor,
        borderColor:     series01linecolor,
        borderWidth:     1,
        fill:            true, // X軸からグラフ線までを塗りつぶし
      }, 
      {
        label:           series02name,
        data:            series02data,
        backgroundColor: series02bgcolor,
        borderColor:     series02linecolor,
        borderWidth:     1,
        fill:            true, // X軸からグラフ線までを塗りつぶし
      }
      // ３つ以上系列を描画する場合は上のセットを追加する
    ]
  },
  options: {
    elements: {
      line: {
        tension: 0.4,          // 0ならば直線
      }
    },
    scales: {
      y: {
        display:      true,
        suggestedMax: ymax,
        suggestedMin: ymin,
        ticks: {
          stepSize: ystep,
        },
        stacked:      true,
      }
    }
  }
});
</script>

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

ゼロから学べるブログ運営×集客×マネタイズ人気ブロガー養成講座 [ 菅家伸 ]
created by Rinker

SWELL

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

ブログ運営
Chart.js
よかったらシェアお願いします！
  • URLをコピーしました！
  • URLをコピーしました！

おすすめ記事

コメント

コメントする

目次