コピペでOK！「Chart.js」を活用してWebページに棒グラフや折れ線グラフを表示する方法

Webページで折れ線グラフや棒グラフを表現する方法を調べてみたら「Chart.js」を使った非常に簡単な実装方法があったのでご紹介します。

今回のブログの見出しはコチラです！

1 グラフを作成する際の準備
2 棒グラフの作成方法
3 折れ線グラフの作成方法
4 棒グラフと折れ線グラフを合わせたグラフの作成方法

グラフを作成する際の準備

「Chart.js」を活用する際にはライブラリを読み込む必要があります。
今回はCDN経由でライブラリを読み込んで使ってみます。

実際の実装イメージとしてはこんな感じになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="line-chart" width="400" height="400"></canvas>
<script>
<!--
  // 処理
//-->
</script>

<!--

// 処理

//-->

</script>

上記のスクリプト内の処理を変えることで、棒グラフや折れ線グラフ等を表示していきます。

棒グラフの作成方法

棒グラフを表現する際は下記のようなプログラムになります。
※以降のプログラムはライブラリが読み込み済みであることを想定して記載します。

<canvas id="bar-chart" width="400" height="400"></canvas>
<script>
<!--
  var context = document.getElementById('bar-chart').getContext('2d');
  var bar_chart = new Chart(context, {
    type:'bar', // グラフのタイプを指定
    data:{
      labels:['1月','2月','3月','4月'], // グラフ下部のラベル
      datasets:[
        {label:'棒グラフのデータ', // データのラベル
          data:[10,20,30,40], // グラフ化するデータの数値
          borderColor:'rgb(255, 99, 132)', // 棒を囲う線の色
          backgroundColor:'rgba(255, 99, 132, 0.2)'} // 棒の中の色
      ]
    },
    options:{
      scales:{
        yAxes:[{
          ticks:{
            min:0, // グラフの最小値
            max: 50 // グラフの最大値
          }
        }]
      }
    }
  });
//-->
</script>

<!--

var context = document.getElementById('bar-chart').getContext('2d');

var bar_chart = new Chart(context, {

type:'bar', // グラフのタイプを指定

data:{

labels:['1月','2月','3月','4月'], // グラフ下部のラベル

datasets:[

{label:'棒グラフのデータ', // データのラベル

data:[10,20,30,40], // グラフ化するデータの数値

borderColor:'rgb(255, 99, 132)', // 棒を囲う線の色

backgroundColor:'rgba(255, 99, 132, 0.2)'} // 棒の中の色

]

options:{

scales:{

yAxes:[{

ticks:{

min:0, // グラフの最小値

max: 50 // グラフの最大値

}

}]

}

});

//-->

</script>

実際のグラフは下記のようになります。

グラフのスタイルを調整したい場合は、datasets内の項目の数値を変更することで調整ができます。

折れ線グラフの作成方法

折れ線グラフを表現する際は下記のようなプログラムになります。

<canvas id="line-chart" width="400" height="400"></canvas>
<script>
<!--
  var context = document.getElementById('line-chart').getContext('2d');
  var line_chart = new Chart(context, {
    type:'line', // グラフのタイプを指定
    data:{
      labels:['1月','2月','3月','4月'], // グラフ下部のラベル
      datasets:[
        {label:'線グラフのデータ',  // データのラベル
          data:[5,40,20,30], // グラフ化するデータの数値
          fill:false, // グラフの下部を塗りつぶさない
          borderColor:'rgb(54, 162, 235)'} // 線の色
      ]
    },
    options:{
      scales:{
        yAxes:[{
          ticks:{
            min:0, // グラフの最小値
            max: 50 // グラフの最大値
          }
        }]
      },
      elements:{
        line:{
          tension: 0 // 線グラフのベジェ曲線を無効にする
        }
      }
    }
  });
//-->
</script>

<!--

var context = document.getElementById('line-chart').getContext('2d');

var line_chart = new Chart(context, {

type:'line', // グラフのタイプを指定

data:{

labels:['1月','2月','3月','4月'], // グラフ下部のラベル

datasets:[

{label:'線グラフのデータ', // データのラベル

data:[5,40,20,30], // グラフ化するデータの数値

fill:false, // グラフの下部を塗りつぶさない

borderColor:'rgb(54, 162, 235)'} // 線の色

]

options:{

scales:{

yAxes:[{

ticks:{

min:0, // グラフの最小値

max: 50 // グラフの最大値

}

}]

elements:{

line:{

tension: 0 // 線グラフのベジェ曲線を無効にする

}

});

//-->

</script>

実際のグラフは下記のようになります。

棒グラフと同じように、グラフのスタイルを調整したい場合はdatasets内の項目の数値を変更することで調整ができます。

棒グラフと折れ線グラフを合わせたグラフの作成方法

棒グラフと折れ線グラフを合わせたグラフを表示する際には、棒グラフのデータに折れ線グラフのデータを追加して表示します。
具体的には、下記のようなプログラムになります。

<canvas id="mix-chart" width="400" height="400"></canvas>
<script>
<!--
  var context = document.getElementById('mix-chart').getContext('2d');
  var mix_chart = new Chart(context, {
    type:'bar', // グラフのタイプを指定
    data:{
      labels:['1月','2月','3月','4月'],
      datasets:[
        {label:'棒グラフ1のデータ',
          data:[10,20,30,40],
          borderColor:'rgb(255, 99, 132)',
          backgroundColor:'rgba(255, 99, 132, 0.2)'},
        {label:'棒グラフ2のデータ',
          data:[20,30,10,5],
          borderColor:'rgb(101, 255, 99)',
          backgroundColor:'rgba(101, 255, 99, 0.2)'},
        {label:'線グラフのデータ',
          data:[5,40,20,30],
          type:'line', // グラフのタイプを指定
          fill:false,
          borderColor:'rgb(54, 162, 235)'}
      ]
    },
    options:{
      scales:{
        yAxes:[{
          ticks:{
            min:0, // グラフの最小値
            max: 50 // グラフの最大値
          }
        }]
      },
      elements:{
        line:{
          tension: 0 // 線グラフのベジェ曲線を無効にする
        }
      }
    }
  });
//-->
</script>