2017年12月16日土曜日

JavaScript でグラフを作る方法 (Chart.js)

meta name='twitter:description' content='JavaScript で Webブラウザーにグラフを描けるChart.jsを使ってみました。多機能で便利です。' />

How to draw charts on web browsers with Chrat.js

Chart.js はWebブラウザーにグラフを描画できるMITライセンスのオープンソースJavaScriptライブラリーです。
グラフはWebブラウザーのcanvasタグで描画するため、普及率の高いWebブラウザーに対応できます。
この Chart.js を使ってWebブラウザー用のグラフを作ってみました。
blog.fujiu.jp JavaScript でグラフを作る方法 (Chart.js)


環境

  • Windows 7、Internet Explorer 11
  • Windows 10、Edge


固定データの棒グラフを表示する

Chart.js でグラフを表示するには、グラフ化したいデータを JSON 化し、 Chart.js のクラスを呼び出すだけです。
気象庁が公開しているCSVファイルから一部抜粋して簡単な棒グラフを作ってみました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chart.js sample 1 fujiu.jp</title>
</head>
<body>
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
"type":"bar",
"data":{
"labels":["小河内","小沢","青梅","練馬","八王子","府中","世田谷","東京","江戸川臨海","羽田"],
"datasets":[{
"label":"昨日までの観測史上1位の値(mm)",
"data":["71","70","107.5","50","63","58.5","68","88.7","85","82"]
}],
"options":{}
}
});
</script>
</body>
</html>
view raw chart.js sample 1 fujiu.jp.html hosted with ❤ by GitHub

これをEdgeで表示するとこうなります。

14～19行目のJSONデータを表示したい内容に合わせて変更すればグラフを変更出来ます。


公開データをグラフ化する

一般公開されているCSVファイルの内容をJSONに変換してグラフ化してみました。
気象庁が定期的に更新しているCSVファイルをリアルタイムに棒グラフ化します。
ただし、 このブログを書いている時点では気象庁のWebサイトはクロスドメインアクセス (Access-Control-Allow-Origin) を開放していないため Windows 7 のInternet Explorer 11 でしか動作確認出来ませんでした。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chart.js sample 2 fujiu.jp</title>
</head>
<body>
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
// 気象庁の1時間降水量のCSVデータをダウンロードする
// (Access-Control-Allow-Origin が開放されてないためほとんどのブラウザーで失敗します)
var url = "http://www.data.jma.go.jp/obd/stats/data/mdrr/pre_rct/alltable/pre1h00_rct.csv";
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.overrideMimeType("text/plain; charset=Shift_JIS");
request.overrideMimeType("Access-Control-Allow-Origin: *");
request.send("");
request.onreadystatechange = function() {
// readyState=4 データ受信完了
if (request.readyState == 4) {
// status=200 リクエスト成功
if (request.status == 200) {
// 受信したCSVコンテンツをグラフに表示する
var csv = request.responseText;
var lines = csv.split("\n");
drawGraph(lines);
}
}
}
/**
*
*/
function drawGraph(lines) {
// CSVからグラフに表示する内容を取り出す
var row = 0;
var col = 18;
var colTitle;
var labels = [];
var data = [];
lines.forEach(function(value) {
row++;
var values = value.split(",");
switch(row) {
case 1:
// 見出し
colTitle = values[col];
break;
case 2:
// 見出しに現在時刻を付け足す
colTitle += " ("
+ values[4]
+ "-"
+ values[5]
+ "-"
+ values[6]
+ " "
+ values[7]
+ ":"
+ values[8]
+ ")";
// break しない
default:
// グラフに表示するラベル文字とデータを取り出す
labels.push(values[2]);
data.push(values[col]);
break;
}
});
// グラフに表示するJSONデータを作成する
// 横軸の値
var datasetsValue = new Object();
datasetsValue.label = colTitle;
datasetsValue.data = data;
// 横軸のラベル
var dataValue = new Object();
dataValue.labels = labels;
dataValue.datasets = [];
dataValue.datasets.push(datasetsValue);
dataValue.options = {};
var charValue = new Object();
charValue.type = "bar";
charValue.data = dataValue;
// グラフを表示する
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, charValue);
}
</script>
</body>
</html>
view raw chart.js sample 2 fujiu.jp.html hosted with ❤ by GitHub



参考にしたコンテンツ

Chart.js は棒グラフのほかにも折れ線グラフ・レーダーチャート・円グラフ・バブルチャート・散布図などがあり、棒と折れ線を重ねることもできます。
そのほか色やアニメーションなど多彩な機能を備えています。
ただし公式サイトは英語のみ。
http://www.chartjs.org/docs/latest/


関連ブログ

Windows10 で古い Internet Explorer を使う方法
Visual Studio Code で Angular の開発環境を構築する方法

投稿者 Mtk Fujiu.jp 時刻: 7:54
ラベル:

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

登録: コメントの投稿 (Atom)