Category: Code

今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 Chart.js 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式サイトからダウンロードするか、以下のCDN経由から利用できます。 <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js”></script> あとは、「body要素」に「canvasタグ」を配置すれば準備OK！ <canvas id=”stage”></canvas> 一般的な「棒グラフ」を描くサンプルコードは以下のとおり。 var canvas = document.getElementById(‘stage’); var chart = new Chart(canvas, { type: ‘bar’, //グラフの種類 data: mydata, //表示するデータ options: options //オプション設定 }); 記述はシンプルで、グラフの種類（「bar」「line」「pie」など）を指定したら、「データ」と「オプション」をオブジェクト形式で渡してあげるだけです。 サンプルデモはコチラ！（スマホの方はコチラから） 【リソース】 ・公式ドキュメント ・ライセンス（MIT） Canvas.js 豊富なグラフパターンが用意されており、細かい部分までカスタマイズ可能な高機能グラフライブラリとなっています。 IE6も含めたほとんどのブラウザで利用でき、レスポンシブ対応のグラフは設定次第で「アニメーション表示」や「ズーム／パン」なども利用できます。 【 基本の書き方 】 「canvasjs.js」ファイルを公式サイトからダウンロードするか、以下のCDN経由から利用できます。 <script src=”https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js”></script> そして、「body要素」にグラフを描画する「divタグ」を配置します。 <div id=”stage”></div> 一般的な「棒グラフ」を描くサンプルコードは以下のとおり。 var stage […]

Read More