はじめに
OpenWeatherMapAPIから気象情報を取得してChart.jsを使ってグラフ化してみました。
例として、「現在の時刻から24h後までの東京都の気温の変化」を取得します。
環境
- Laravel6系(PHP)
- OpenWeatherMapAPI
- Chart.js(JavaScriptライブラリ)
ソースコード例
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ChartController extends Controller
{
public function index()
{
// 天気API取得のための情報準備
$weatherConfig = array(
'appid' => '各自で取得',
'lat' => '26.231408', //沖縄の那覇市の緯度
'lon' => '127.685525', //沖縄の那覇市の経度
);
// 天気API取得とJSONデコード
$weatherJson = file_get_contents('http://api.openweathermap.org/data/2.5/onecall?lat=' . $weatherConfig['lat'] . '&lon=' . $weatherConfig['lon'] . '&units=metric&lang=ja&APPID=' . $weatherConfig['appid']);
$weatherData = json_decode($weatherJson, true);
$hour = [];
$temp = [];
$dayLabels = [];
$tempData = [];
$weatherViewData = array();
// 1時間毎の天気の情報全て
$weatherHours = $weatherData['hourly'];
foreach($weatherHours as $weatherHour) {
// 時間のラベル・気温のデータを取得
$dayLabels[] = date('m/d:H時', $weatherHour['dt']);
$tempData[] = $weatherHour['temp'];
$weatherViewData['dayLabels'] = $dayLabels;
$weatherViewData['temp'] = $tempData;
}
// JSへ渡すためにエンコード
$weatherViewData = json_encode($weatherViewData);
return view('chart', ['weatherViewData' => $weatherViewData]);
}
}
解説
OpenWeatherMapAPIを取得
// 天気API取得のための情報準備
$weatherConfig = array(
'appid' => '各自で取得',
'lat' => '26.231408', //沖縄の那覇市の緯度
'lon' => '127.685525', //沖縄の那覇市の経度
);
// 天気API取得とJSONデコード
$weatherJson = file_get_contents('http://api.openweathermap.org/data/2.5/onecall?lat=' . $weatherConfig['lat'] . '&lon=' . $weatherConfig['lon'] . '&units=metric&lang=ja&APPID=' . $weatherConfig['appid']);
$weatherData = json_decode($weatherJson, true);
APIのidの取得は公式HPで登録するだけでOK.
https://openweathermap.org/
idの取得はこのブログが参考になる。
https://yuukiyg.hatenablog.jp/entry/2019/11/17/182410
緯度と経度は今回予め指定しているがフォームなどから取得しても良いし、APIのURLを変更すれば緯度・経度からではなく「東京都」のような都道府県名から取得することもできる。（割愛)
JSONとして受け取るため、デコードが必要になる。
受け取ったJSONのデータを整形
// 1時間毎の天気の情報全て
$weatherHours = $weatherData['hourly'];
foreach($weatherHours as $weatherHour) {
// 時間のラベル・気温のデータを取得
$dayLabels[] = date('m/d:H時', $weatherHour['dt']);
$tempData[] = $weatherHour['temp'];
$weatherViewData['dayLabels'] = $dayLabels;
$weatherViewData['temp'] = $tempData;
}
// JSへ渡すためにエンコード
$weatherViewData = json_encode($weatherViewData);
JSONのデータをvar_dump()して頂くと分かるが、時間、気温、天候、天気を示すアイコンなど様々なものがJSONで取得できている。今回は一時間毎の気温を取得したいので、このような整形をしていて、最後にPHPからJavaScriptへ渡したいのでエンコードしている。
Chart.jsを使ったグラフの表示
表示部分に関わる部分のコードを抜粋↓
<head>
...(割愛)
<!-- chart.jsのCDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js">
</head>
<body>
<h1>気温グラフ</h1>
<canvas id="chart"></canvas>
<script>
var weatherViewData = JSON.parse('<?php echo $weatherViewData; ?>'); // JSONデコード
var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: weatherViewData['dayLabels'],
datasets: [
{
label: '気温',
data: weatherViewData['temp'],
borderColor: 'rgba(255,0,0,1)',
backgroundColor: 'rgba(0,0,0,0)'
},
// {
// * 複数のデータを追加可能
// },
],
},
options: {
title: {
display: true,
text: '気温'
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 20,
suggestedMin: 0,
stepSize: 5,
callback: function(value, index, values){
return value + '度'
}
}
}]
},
}
});
</body>
Chart.jsをCDNでネットワーク経由で利用
<head>
...(割愛)
<!-- chart.jsのCDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js">
</head>
今回はCDNを使用。headタグの中にscriptを埋め込んでいる。
CDNを使う場合は、下記のURLからURLを取得できる。
https://cdnjs.com/libraries/Chart.js
もちろんnpmでのインストールでもOK。
グラフ表示エリア
<canvas id="chart"></canvas>
HTML5から導入されたcanvasタグでグラフの表示エリアを指定。
Chart.jsの基本の使い方
var weatherViewData = JSON.parse('<?php echo $weatherViewData; ?>');
var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
}
PHPから渡ってきた$weatherViewDataをパースして、JavaScriptの変数weatherViewDataへ格納。
canvas要素のchartのidを指定して、Chartのライブラリを使っていく。
描画するグラフの値の設定
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: weatherViewData['dayLabels'],
datasets: [
{
label: '気温',
data: weatherViewData['temp'],
borderColor: 'rgba(255,0,0,1)',
backgroundColor: 'rgba(0,0,0,0)'
},
// {
// * 複数のデータを追加可能
// },
],
},
options: {
title: {
display: true,
text: '気温'
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 20,
suggestedMin: 0,
stepSize: 5,
callback: function(value, index, values){
return value + '度'
}
}
}]
},
}
基本的にはtype, data, optionsを指定すればグラフは描けた。
dataの中でPHPから渡ってきた変数を使っている。
・type => 今回は折れ線グラフを使用するために「line」を使用。
・data => dataの中にlabelとdatasetを記入する。
・options => オプションなので、グラフのタイトルや、Y軸のパラメータなどを指定する。
下記の記事が参考になる。
https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369#2-%E8%A8%98%E8%BF%B0%E5%BD%A2%E5%BC%8F
Chart.jsでは他にも様々なグラフが書けるようなので挑戦してみたい。