JavaScriptで棒グラフを作りたい！CSS, Canvas, ライブラリの活用

JavaScriptは基本的な構文を使ったロジカルなプログラミングだけでなく、DOMやCanvasを活用したグラフィカルな描画を行うことも可能です。

そのため、Webサイトへグラフを挿入することも可能なのですが、実際のプログラミングとしてはどのように構築すれば良いのでしょうか？ グラフの作成手法や効率の良いライブラリの活用などで悩んでいる方も少なくないでしょう。

そこで、この記事では初心者でも今日からJavaScriptで棒グラフを作成するための方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がJavaScriptの不安を解消できれば幸いです。

CSSを活用した棒グラフ

この章では、HTML / CSSを活用した棒グラフの作成手順について見ていきましょう。主に、CSSの活用方法やJavaScriptによる制御について学んでいきます。

HTML/CSSによるグラフ

まず最初にHTML / CSSを利用して棒グラフを作ってみましょう！

グラフの骨組みとなるHTMLは、リスト要素を必要な分だけ配置するのが簡単です。例えば、3本の棒グラフを描画するためのHTMLは以下の通りです。

    

        

        
アメリカ
    
    

        

        
日本
    
    

        

        
ロシア
    

li要素の中にdivタグを配置して、このdiv要素の高さを変化させることで棒グラフを描画していきます。p要素は、グラフにラベルを付与するためのものです。

あとはCSSで棒グラフっぽく装飾すれば完成です。

具体的には、li要素をインラインにして横並びにします。そして、div要素の高さと背景色を設定すれば良いわけです。

li {
    display:  inline-block;
    width:  100px;
    text-align:  center;
}

.bar {
    width:  20px;
    height: 100px;
    margin:  0 auto;
    background-color: #000;
}

このように各div要素の高さが100pxの棒グラフが完成します。

ただし、HTML / CSSで作成したグラフはあらかじめ高さなどを決めておく必要があります。つまり、グラフを動的に変更できないわけです。

そこで、JavaScriptを利用して自在に変更可能な棒グラフを作成する方法について見ていきましょう！

JavaScriptでCSSを制御するには？

まずはJavaScriptでCSSを操作するための手順についておさらいしておきましょう！

大きな流れとしては、HTML要素を取得してからその要素へスタイルを設定していくことになります。そこで、まずはli要素内にあるdiv要素をクラス名を使って取得していきます。

const bar = document.getElementsByClassName('bar');

getElementsByClassNameを使うと、引数に指定したクラス名を持つHTML要素をすべて取得して配列のようなHTMLコレクションとして保持できます。つまり、この場合は3本の棒グラフを描画しているdiv要素を取得するというわけです。

あとはこのdiv要素に高さを意味するheightプロパティのCSSを適用するようにプログラミングしましょう。

bar[0].style.height = '100px';

この高さをJavaScriptから制御することで、任意の棒グラフを動的に生成することができるのです。

JavaScriptとCSSで棒グラフを生成する

JavaScriptからCSSを操作する方法を確認したところで、具体的なプログラミング手法を見ていきましょう！

まず最初に、CSSに設定していたheightプロパティをコメントアウトするか削除しておきましょう。

.bar {
    width:  20px;
/*   height: 100px; */
    margin:  0 auto;
  background-color: #000;
}

これで棒グラフには高さの概念が無くなりましたね。

次に、JavaScriptから任意の高さを持つ棒グラフを作成してみましょう！ 棒グラフの要素とデータを次のように作成します。

const bar = document.getElementsByClassName('bar');
const data = [150,100,50];

配列dataには棒グラフに適用したい高さを用意しておきます。

次に、取得した棒グラフの要素をfor-of文で繰り返し処理を実装しましょう。

 let counter = 0;

  for(let elem of bar) {
    elem.style.height = data[counter++] + 'px';
  }

style.heightで1つずつの棒グラフに対して用意した高さを適用させていくわけです。

実行すると以下のようなグラフになります。

ここまで来れば、あとは配列dataの値を任意に変えていくだけで棒グラフの描画を自在にコントール可能になるというわけです。

Canvasを活用した棒グラフ

この章では、Canvas APIを利用した棒グラフの描画について見ていきましょう！主に、基本的な描画方法から棒グラフの生成手順について学んでいきます。

Canvasの基本的な使い方

JavaScriptからCanvasを利用するためには、まず最初にCanvas要素自体を生成しておく必要があります。

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

createElementメソッドを利用してCanvas要素を作成します。そのあとに、さまざまなCanvas APIを使うためにgetContextメソッドを利用してコンテキストを取得しておきます。

また、Canvasに描画する画面サイズは以下のように設定することができます。

canvas.width = 600;
canvas.height = 400;

これで600×400pxのCanvasが準備されました。

最後に、作成したCanvasを画面へ表示するためにappendChildを使います。

document.body.appendChild(canvas);

ここまでの作業でJavaScriptからCanvasを利用するための準備が完了しました。

ちなみに、Canvasを使って基本的な図形を描画するための基礎知識をさらに深めたい場合は、次の記事でまとめているのでぜひ参考にしてみてください！

JavaScriptとCanvasで棒グラフを生成する

Canvasを利用して棒グラフを作成する簡単な方法としては、fillRectメソッドを利用して長方形の図形を描画するのが良いでしょう。

ここでfillRectメソッドの構文をおさらいしておきましょう。

ctx.fillRect(X座標, Y座標, 幅, 高さ);

このように第4引数の【高さ】を変更することで、棒グラフをJavaScriptで制御することができるわけです。

まず最初に、棒グラフのデータとなる高さと幅を決めておきましょう！

const data = [150,100,50];
const WIDTH = 20;
const OFFSET = 4;

OFFSETは1つずつの棒グラフの間隔を設定しています。

あとはfor文を利用して、配列dataの高さをfillRectに1つずつ適用させていくだけです。

for(let i=0; i


Canvas APIを利用して作成した棒グラフ

注意点が必要なのはY軸の原点位置です。
canvas.height - data[i]から計算したY座標を1つずつ作成しているのは、棒グラフを下から上へ伸びるように描画したいからです。
Canvasの原点が左上なのに対して、fillRectで作成する長方形の原点が左下になるという点は覚えておきましょう。
ライブラリを活用した棒グラフ
この章では、効率よく見た目の良い棒グラフを作成できるライブラリの使い方を見ていきましょう。基本的な導入方法からグラフの作成方法までを学んでいきます。
Chart.jsの導入方法
簡単な記述で効率の良い棒グラフを作成できるライブラリとしてChart.jsを使ってみましょう！
導入方法としては簡単で、以下のCDN経由からURLをscriptタグに追記すればすぐに利用することができます。
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js

そして、HTMLにCanvas要素を追加しておけば準備は完了です！


ID属性値はあとでJavaScriptから利用するので必ず付与しておくようにしましょう。
棒グラフや折れ線グラフを描画する
それでは、簡単な棒グラフを作成してみましょう！
基本的な流れとしては、先ほどHTMLに配置したCanvas要素を取得してChart.jsのインスタンスを作成していきます。
var canvas = document.getElementById('stage');
var chart = new Chart(canvas, {

  type: 'bar',
  data: mydata,

});

インスタンスを作成する際に初期設定として、グラフの種類（type）と描画するデータ（data）のプロパティを指定します。
typeを【bar】にすると棒グラフになります。
また、描画するデータに関しては次のように設定しておきます。
const mydata = {
  labels: ["１月", "２月", "３月", "４月", "５月", "６月", "７月"],

  datasets: [
    {
      label: '数量',
      data: [65, 59, 80, 81, 56, 55, 48],
    }
  ]
};

オブジェクトに【labels】【datasets】プロパティを作成し、棒グラフに表示したいラベルやデータを設定するだけなので簡単です。
これを実行すると以下のような棒グラフが作成できます。


Chart.jsによる棒グラフ

また、typeを変更して折れ線グラフも簡単に描画できます。
ただし、デフォルト状態だとベジェ曲線が適用されているのでこれを解除しておきましょう。方法はオプションでtensionプロパティを0にしておくだけです。
const chart = new Chart(canvas, {

  type: 'line',
  data: mydata,
  options: {
    elements: {
      line: {tension: 0}
    }
  }

});

また、折れ線の下方向に色が適用されているので、これも透明にしておくと良いでしょう。
 datasets: [
    {
      label: '数量',
      data: [65, 59, 80, 81, 56, 55, 48],
      backgroundColor: "rgba(0,0,0,0)"
    }
  ]

このようにdatasetsプロパティ内のbackgroundColorを設定することで透明になります。
実行すると以下のような折れ線グラフになります！


Chart.jsによる折れ線グラフ

このようにChart.jsを利用すれば、簡単な記述なのに美しいグラフ描画することができるのでオススメです！
まとめ
今回は、JavaScriptで棒グラフを作成するための手法について学習してきました！
最後に、もう一度ポイントをおさらいしておきましょう！


CSSの高さをJavaScriptで制御することで棒グラフを作成できる
CanvasのfillRectを利用することで棒グラフを作成できる
Chart.jsなどのライブラリを利用すると効率よく棒グラフを作成可能


上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！