How to draw charts on web browsers with Chrat.js
Chart.js はWebブラウザーにグラフを描画できるMITライセンスのオープンソースJavaScriptライブラリーです。グラフはWebブラウザーのcanvasタグで描画するため、普及率の高いWebブラウザーに対応できます。
この Chart.js を使ってWebブラウザー用のグラフを作ってみました。
環境
- Windows 7、Internet Explorer 11
- Windows 10、Edge
固定データの棒グラフを表示する
Chart.js でグラフを表示するには、グラフ化したいデータを JSON 化し、 Chart.js のクラスを呼び出すだけです。気象庁が公開しているCSVファイルから一部抜粋して簡単な棒グラフを作ってみました。
これをEdgeで表示するとこうなります。
14～19行目のJSONデータを表示したい内容に合わせて変更すればグラフを変更出来ます。
公開データをグラフ化する
一般公開されているCSVファイルの内容をJSONに変換してグラフ化してみました。気象庁が定期的に更新しているCSVファイルをリアルタイムに棒グラフ化します。
ただし、 このブログを書いている時点では気象庁のWebサイトはクロスドメインアクセス (Access-Control-Allow-Origin) を開放していないため Windows 7 のInternet Explorer 11 でしか動作確認出来ませんでした。
参考にしたコンテンツ
Chart.js は棒グラフのほかにも折れ線グラフ・レーダーチャート・円グラフ・バブルチャート・散布図などがあり、棒と折れ線を重ねることもできます。そのほか色やアニメーションなど多彩な機能を備えています。
ただし公式サイトは英語のみ。
http://www.chartjs.org/docs/latest/
関連ブログ
Windows10 で古い Internet Explorer を使う方法Visual Studio Code で Angular の開発環境を構築する方法
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。