初心者でもJavaScriptでグラフを自作できるコツを徹底的に伝授


JavaScriptでグラフを自作するにはどうすれば良いんだろう
Canvasを活用したグラフ描画をやってみたい
ライブラリを効率よく利用してグラフを作ってみたい

JavaScriptはCanvas APIを活用することで、グラフィカルな描画も簡単にプログラミングすることが可能です

ただし、基本的な構文とは書き方が少し異なるため、いざ描画の実装を始めようとすると困惑する人も少なくありません。また、Webコンテンツの1つとしてグラフを描画するようなケースも増えていますが、このような実装はどのように学習すれば良いのでしょうか?

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

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

Canvasの基本

この章では、Canvas APIを利用したプログラミングを行う方法について見ていきましょう。主に、Canvasの概要と導入方法について学んでいきます。

Canvasとは?

HTML5から導入されたCanvas APIは、ブラウザ上に自由なグラフィックをJavaScriptから描画できるようにしてくれる仕組みになります。

このAPIを活用することで、グラフの描画だけでなくゲームやアニメーションなどさまざまな処理をJavaScriptで実現できるようになるわけです。

Canvas APIのイメージ図

Canvas APIは奥が深いので、しっかりとポイントを踏まえたうえで学習することが望ましいでしょう。本記事を参考にして、独自のグラフを作成できるように頑張りましょう!

Canvasの導入方法

Canvasの使い方は簡単です。

HTMLタグとしてCanvas要素が提供されているので、次のように記述するだけで利用できるわけです。

また、完全にJavaScriptだけでCanvasを生成することも可能です。

この例では、createElement()メソッドを利用してCanvas要素を生成していますね。どちらの方法でも実現できることは同じなので、自分の環境に合わせて選択すると良いでしょう。

また、Canvasを利用する際には最初に2Dコンテキストを取得する必要があります。

getContext()メソッドで取得可能で、これを利用することでさまざまな描画メソッドをJavaScriptで使えるようになるのです。

Canvas APIについての基礎知識については、次の記事でも体系的にまとめているので合わせて参考にしてみてください!

知っておきたいHTMLのCanvasとは?何ができるのかを解説
更新日 : 2019年6月26日

Canvasによるグラフ自作

この章では、Canvas APIを利用したグラフの作成方法について見ていきましょう。主に、棒グラフを作成する仕組みやプログラミング手法について学んでいきます。

Canvasで棒グラフを作るには?

それでは、まず最初にCanvasで棒グラフを作成する手順について見ていきましょう。

普通に考えれば、Canvasを利用して長方形を描画していけば簡単に棒グラフを作成できそうですよね?しかし、1つ注意しなければいけないので【原点】の扱いです。

Canvasで描画する図形は、基本的に原点が左上にあります。

Canvasの原点がある位置

この事実を考慮しないと思い通りのグラフは作れません。

例えば、塗りつぶしの長方形を描画するにはfillRect()メソッドを次のように記述すればできます。

しかし、原点が左上なので実行すると以下のように上からグラフが伸びるようになります。

上から伸びたグラフ

本来なら棒グラフは下から伸びるようにしたいですよね。

そのため、Y座標をCanvasの高さで引いてあげないといけないのです。例えば、Canvasの高さが400であれば、次のように記述できます。

この例では、Y座標を【Canvasの高さ】から【長方形の高さ】で引いた数値にしていますね。これにより、高さ分だけ引いた位置から図形を描画できるので正しいグラフになります。

高さ分を引いた位置からグラフを描画

この仕組みが理解できたら、棒グラフは自在に作成することができるようになります。

グラフ自作のプログラミング手法

それでは、実際に棒グラフを作成してみましょう。

今回はJavaScriptだけでCanvasを生成してみようと思うので、まずは以下のように初期設定を済ませておきましょう。

appendChild()メソッドを忘れると、ブラウザ上に描画されないので忘れないようにしておきましょう。また、今回はCanvasの高さを400に設定していますが、お好みで調節してみてください。

次に、グラフの幅・高さ・間隔を事前に変数へセットしておきましょう。

高さに関しては、描画したいグラフの数だけ配列で用意しておくと扱いやすいのでオススメです。

あとは、この高さの配列をfor文などを利用して描画していくわけです。

X座標は幅と間隔を繰り返し分だけ掛け合せれば良いですね。

また、Y座標は前章でも解説したようにCanvasの高さから引いてあげます。あとは、これらの座標をベースにしてfillRect()で描画すればグラフが作成できます。

Canvas APIを利用したグラフ描画

また、グラフのテーマカラーを変更したければ、fillStyleプロパティを利用することで簡単に変更できます。

この例では、カラーコードを配列に格納して各グラフのカラーを変更しています。実行すると以下のように描画されます。

カラースタイルを変更したグラフ

ぜひ、データの数値やカラーなどを変更して独自のグラフを作成してみてください。

ライブラリによるグラフ自作

この章では、グラフを描画することに特化したライブラリを活用する方法について見ていきましょう。主に、ライブラリの導入からグラフの作成までを学んでいきます。

グラフ作成ライブラリを導入しよう

本記事では、簡単な記述でインタラクティブなグラフを描画できるChart.jsライブラリについてご紹介します。

【Chart.js】

グラフのデータやオプションなどをオブジェクト形式で指定するだけで、さまざまなグラフやチャートを描画できるので便利です。

使い方は簡単で、ライブラリをCDN経由で以下のように読み込むだけです。

ライブラリを読み込んだらcanvasタグをHTMLに挿入しておきましょう。

これで導入準備は完了です!

棒グラフを作成する方法

Chart.jsでグラフを作成するためには、インスタンスを作成する時にオプションを一緒に次のように設定します。

第1引数にはCanvas要素を指定し、第2引数にグラフの初期設定を指定します。上記の例では、グラフの種類とデータセットを指定しました。

【type】プロパティがグラフの種類なのですが、【bar】と設定すれば自動的に棒グラフを描画してくれます。もちろん、他にも円グラフやレーダーチャート・折れ線グラフなど多彩なプリセットが用意されています。

【data】プロパティにグラフ化するデータセットを指定するのですが、一般的には以下のように用意しておきます。

【labels】プロパティがグラフのX軸に表示されるラベルになります。【datasets】プロパティにグラフ化したい数値を配列で指定します。上記の例のように複数のグラフを同時に出力することも可能です。

実行すると以下のように描画されます。

Chart.jsによる棒グラフ

また【datasets】プロパティには、いくつかオプションも同時に指定可能です。例えば、グラフのカラーを変更したければ【backgraoundColor】プロパティを次のように指定することができます。

実行すると以下のように描画されます

カラースタイルを変更した棒グラフ

このようにChart.jsを活用すれば、短時間で見た目の良いグラフを自在に作っていくことができるわけです。

まとめ

今回は、JavaScriptでグラフを自作する方法について学習をしました。

最後に、もう一度ポイントをおさらいしておきましょう!

  • Canvas APIを活用することでグラフィカルな描画を行える
  • Cnavasでグラフを作成するにはY軸の座標に注意する
  • ライブラリを活用すれば短時間でリッチなグラフを描画できる

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説