はじめに
データビジュアライゼーションに興味を持ったため、色々調べてみたところ
以下のようなライブラリが多く使用されているとのことでした。
- d3.js
- Charts.js
- Highcharts
この記事では、Highchartsについて環境構築からサンプルグラフの描画までを紹介します。
対象者
- Highchartsを触ったことがない
- データビジュアライゼーション初心者
- 環境構築からサンプルグラフの表示までをとりあえずしてみたい
実行環境
- Windows 10
- Google Chrome
インストール
今回は簡易版のため、HTMLファイルに直接参照先を記載します。
そのため、環境構築やインストールは不要です。
ブラウザとHTMLファイルのみ使用します。
データ
直近6日の各地域における気温の変化を折れ線グラフで表示します。
データは気象庁からcsv形式でダウンロードします。
https://www.data.jma.go.jp/gmd/risk/obsdl/index.php
data.csv
ダウンロードした時刻:2020/03/26 09:13:48,,,,
,,,,
,大阪,京都,那覇,札幌
年月日,平均気温(℃),平均気温(℃),平均気温(℃),平均気温(℃)
,,,,
2020/3/20,12.8,12.1,19.5,6.2
2020/3/21,13.6,12.8,21.2,6.6
2020/3/22,14.9,13.9,23.7,5.9
2020/3/23,12.3,11.6,22.2,2.6
2020/3/24,10.1,8.4,20.8,1.9
2020/3/25,11,9.9,21.5,4.9
HTML
HTMLファイルの中身です。
タイトルや縦軸、凡例の設定をしていきます。
seriesにcsvデータ中の身を記入しています。
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts temp sample</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 680px; height: 550px; margin: 0 auto"></div>
<script language="JavaScript">
window.onload = function () {
Highcharts.chart('container', {
// グラフ属性設定
// 各属性の詳細:https://api.highcharts.com/highcharts/
//グラフタイトル
title: {
text: '2020/3/20~2020/3/25の平均気温の推移'
},
//横軸の表題
xAxis: {
categories: ['2020/3/20', '2020/3/21', '2020/3/22', '2020/3/23', '2020/3/24', '2020/3/25']
},
//縦軸の設定
yAxis: {
title: {
text: '気温[℃]'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
//ツールチップ
tooltip: {
valueSuffix: '℃'
},
//凡例位置
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
//データの生成
series: [
{
name: '大阪',
data: [12.8, 13.6, 14.9, 12.3, 10.1, 11]
},
{
name: '京都',
data: [12.1, 12.8, 13.9, 11.6, 8.4, 9.9]
},
{
name: '那覇',
data: [19.5, 21.2, 23.7, 22.2, 20.8, 21.5]
},
{
name: '札幌',
data: [6.2, 6.6, 5.9, 2.6, 1.9, 4.9]
}
],
responsive: {
rules: [{
condition: {
maxWidth: 600
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
}
</script>
</body>
</html>
結果
グラフが表示されます。
マウスカーソルをグラフ上に持っていくと、ツールチップが表示されます。
参考
https://www.highcharts.com/docs/getting-started/your-first-chart
https://qiita.com/ponsuke0531/items/3254dc0bad1655199827