chart.jsで棒グラフを実装

2020.6.302020.6.30Writer: morishitaComment: 0

開発ブログ

こんにちは。

プラコレでwebデザインとコーディングを
やらせていただいております森下です。

今回は最近グラフを実装する際に使った
chart.jsについて説明したいと思います。

まず、chart.jsとは・・・

Canvasを使用したグラフ描画ライブラリです。

データを用意するだけで折れ線グラフや棒グラフ、ドーナツチャートなど様々なグラフを描画することができます。

グラフを描画する際にアニメーションを行うこともできます★

公式ホームページはコチラ
https://www.chartjs.org/

どんなグラフがつくれるの？

では、まずchart.jsで実装できるグラフの種類をみていきましょう。

棒グラフ

折れ線グラフ

こんな形にもできるんですね！

ドーナツ型グラフ

円グラフ

棒グラフ×折れ線グラフ

こんな感じでグラフの種類も色も操ることができます！
それでは実際の実装方法をみていきましょう！

chart.jsで棒グラフを作ろう

では、実際に私が作成した棒グラフを元に実装方法をみていきましょう。

chart.jsの読み込み

Chart.jsを使用するために、CDNに公開されているjsファイルを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

1	{{urvanov-syntax-highlighter-internal:0}}

HTMLの設定

HTML上にcanvasというタグを設置します。
このcanvasの中にChart.jsが描画するグラフが表示されます。

<canvas id="temperature-chart-canvas"></canvas>

1	<canvas id="temperature-chart-canvas"></canvas>

idはご自由に好きなものを指定してください。

Javascriptの設定

あとはJavascript部分を設定するだけ！

<script>
jQuery(function($){
  var config = {
    type: 'bar',
    data: {
      labels: ['','','','','','','','','','','',''],
      datasets: [
        {
          label: 'a',
          data: [60000, 62000, 64000, 67000, 71000, 74000, 78000, 80000, 82000, 84000, 89000, 91000],
          backgroundColor: "#999999",
          //borderColor: dsColor,
        }
        ,{
          label: 'b',
          data: [14000, 17000, 19000, 22000, 25000, 29000, 34000, 39000, 42000, 45000, 49000, 52000],
          backgroundColor: "#999999",
          // borderColor: "#f893a2",
          // borderWidth: 10
        }
        ,{
          label: 'c',
          data: [15000, 19000, 21000, 26000, 28000, 32000, 35000, 38000, 43000, 45000, 47000, 48000],
          backgroundColor: "#999999",
          // borderColor: "#47e5bb",
          // borderWidth: 10
        }
        ,{
          label: 'd',
          data: [20000, 30000, 34000, 46000, 58000, 60000, 70000, 80000, 82000, 85000, 87000, 90000],
          backgroundColor: "#999999",
          // borderColor: "#c9daf8",
          // borderWidth: 10
        }
      ]
    },
    options: {
      tooltips: {
        enabled: false,
      },
      legend: {
        display: false,
        position: 'bottom',
        labels: {
          boxWidth: 10
        }
      },
      scales: {
        xAxes: [{
          display: true,
          stacked: true,
          gridLines: {
            display: false
          }
        }],
        yAxes: [{
          stacked: true,
          gridLines: {
            display: false
          },
          ticks: {
            suggestedMax: 250000,
            suggestedMin: 50000,
            stepSize: 50000,
            callback: function(value, index, values){
              return  value +  ''
            }
          }
        }]
      },
    }
  }

  var chart = false;

  // var ctx = document.getElementById("temperature-chart-canvas");
  // var myLineChart = new Chart(ctx, config);

  var draw = false;
  $(window).on('load scroll', function() {
    var scroll = $(window).scrollTop();
    var scrollPosition = $(window).height() +scroll;

    var chartTop = $("#temperature-chart").offset().top;
    var chartBottom = chartTop + $("#temperature-chart").height();

    if((chartTop <= scrollPosition) && (scroll <= chartBottom)){
      if(!draw){
        var ctx = document.getElementById("temperature-chart-canvas");
        ctx.height=window.innerHeight*0.5;
        var myLineChart = new Chart(ctx, config);
        draw = true;
      }
    }
  });
});
</script>

1	{{urvanov-syntax-highlighter-internal:0}}

label,datasetsに上記で定義したデータ・ラベルの配列が入ります。
typeを変更することで折れ線グラフやドーナツチャートなどグラフの種類を設定することができます。

そして完成したグラフが・・・

こんな感じです。

typeを変更すると・・・

折れ線グラフや、

円グラフにもなります。

こんな感じでグラフができちゃいます。
chart.jsとっても便利ですね。
私もこれからもグラフ作成の際には活用していきたいと思います。