APIを活用することで、グラフィカルな描画も簡単にプログラミングすることが可能ですただし、基本的な構文とは書き方が少し異なるため、いざ描画の実装を始めようとすると困惑する人も少なくありません。Webコンテンツの1つとしてグラフを描画するようなケースも増えていますが、このような実装はどのように学習すれば良いのでしょうか?そこで、この記事では初心者でも今日からJavaScriptによるグラフ自作を行うための方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。一人でも多くの方がJavaScriptの不安を解消できれば幸いです。APIを利用したプログラミングを行う方法について見ていきましょう。Canvasの概要と導入方法について学んでいきます。APIは、ブラウザ上に自由なグラフィックをJavaScriptから描画できるようにしてくれる仕組みになります。このAPIを活用することで、グラフの描画だけでなくゲームやアニメーションなどさまざまな処理をJavaScriptで実現できるようになるわけです。APIは奥が深いので、しっかりとポイントを踏まえたうえで学習することが望ましいでしょう。本記事を参考にして、独自のグラフを作成できるように頑張りましょう!Canvasの導入方法Canvasの使い方は簡単です。HTMLタグとしてCanvas要素が提供されているので、次のように記述するだけで利用できるわけです。完全にJavaScriptだけでCanvasを生成することも可能です。400;document.body.appendChild(canvas);この例では、createElement()メソッドを利用してCanvas要素を生成していますね。どちらの方法でも実現できることは同じなので、自分の環境に合わせて選択すると良いでしょう。Canvasを利用する際には最初に2Dコンテキストを取得する必要があります。canvas.getContext("2d");getContext()メソッドで取得可能で、これを利用することでさまざまな描画メソッドをJavaScriptで使えるようになるのです。APIを利用したグラフの作成方法について見ていきましょう。棒グラフを作成する仕組みやプログラミング手法について学んでいきます。Canvasで棒グラフを作るには?それでは、まず最初にCanvasで棒グラフを作成する手順について見ていきましょう。普通に考えれば、Canvasを利用して長方形を描画していけば簡単に棒グラフを作成できそうですよね?しかし、1つ注意しなければいけないので【原点】の扱いです。Canvasで描画する図形は、基本的に原点が左上にあります。Canvasの原点がある位置この事実を考慮しないと思い通りのグラフは作れません。塗りつぶしの長方形を描画するにはfillRect()メソッドを次のように記述すればできます。150);しかし、原点が左上なので実行すると以下のように上からグラフが伸びるようになります。上から伸びたグラフ本来なら棒グラフは下から伸びるようにしたいですよね。そのため、Y座標をCanvasの高さで引いてあげないといけないのです。Canvasの高さが400であれば、次のように記述できます。150);この例では、Y座標を【Canvasの高さ】から【長方形の高さ】で引いた数値にしていますね。これにより、高さ分だけ引いた位置から図形を描画できるので正しいグラフになります。高さ分を引いた位置からグラフを描画この仕組みが理解できたら、棒グラフは自在に作成することができるようになります。グラフ自作のプログラミング手法それでは、実際に棒グラフを作成してみましょう。今回はJavaScriptだけでCanvasを生成してみようと思うので、まずは以下のように初期設定を済ませておきましょう。400;document.body.appendChild(canvas);appendChild()メソッドを忘れると、ブラウザ上に描画されないので忘れないようにしておきましょう。今回はCanvasの高さを400に設定していますが、お好みで調節してみてください。次に、グラフの幅・高さ・間隔を事前に変数へセットしておきましょう。4;高さに関しては、描画したいグラフの数だけ配列で用意しておくと扱いやすいのでオススメです。あとは、この高さの配列をfor文などを利用して描画していくわけです。heights[i]);}X座標は幅と間隔を繰り返し分だけ掛け合せれば良いですね。Y座標は前章でも解説したようにCanvasの高さから引いてあげます。あとは、これらの座標をベースにしてfillRect()で描画すればグラフが作成できます。APIを利用したグラフ描画また、グラフのテーマカラーを変更したければ、fillStyleプロパティを利用することで簡単に変更できます。color[i];}この例では、カラーコードを配列に格納して各グラフのカラーを変更しています。実行すると以下のように描画されます。カラースタイルを変更したグラフぜひ、データの数値やカラーなどを変更して独自のグラフを作成してみてください。ライブラリによるグラフ自作この章では、グラフを描画することに特化したライブラリを活用する方法について見ていきましょう。ライブラリの導入からグラフの作成までを学んでいきます。グラフ作成ライブラリを導入しよう本記事では、簡単な記述でインタラクティブなグラフを描画できるChart.jsライブラリについてご紹介します。【Chart.js】URL:https://www.chartjs.org/グラフのデータやオプションなどをオブジェクト形式で指定するだけで、さまざまなグラフやチャートを描画できるので便利です。使い方は簡単で、ライブラリをCDN経由で以下のように読み込むだけです。ライブラリを読み込んだらcanvasタグをHTMLに挿入しておきましょう。これで導入準備は完了です!棒グラフを作成する方法Chart.jsでグラフを作成するためには、インスタンスを作成する時にオプションを一緒に次のように設定します。mydata});第1引数にはCanvas要素を指定し、第2引数にグラフの初期設定を指定します。上記の例では、グラフの種類とデータセットを指定しました。【type】プロパティがグラフの種類なのですが、【bar】と設定すれば自動的に棒グラフを描画してくれます。他にも円グラフやレーダーチャート・折れ線グラフなど多彩なプリセットが用意されています。【data】プロパティにグラフ化するデータセットを指定するのですが、一般的には以下のように用意しておきます。]};【labels】プロパティがグラフのX軸に表示されるラベルになります。【datasets】プロパティにグラフ化したい数値を配列で指定します。上記の例のように複数のグラフを同時に出力することも可能です。実行すると以下のように描画されます。Chart.jsによる棒グラフまた【datasets】プロパティには、いくつかオプションも同時に指定可能です。グラフのカラーを変更したければ【backgraoundColor】プロパティを次のように指定することができます。]};実行すると以下のように描画されますカラースタイルを変更した棒グラフこのようにChart.jsを活用すれば、短時間で見た目の良いグラフを自在に作っていくことができるわけです。まとめ今回は、JavaScriptでグラフを自作する方法について学習をしました。APIを活用することでグラフィカルな描画を行えるCnavasでグラフを作成するにはY軸の座標に注意するライブラリを活用すれば短時間でリッチなグラフを描画できる上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。