Canvas で東京電力の電力使用状況を可視化してみた
Canvas の棒グラフ、円グラフの描画 ＋ 東京電力の電力使用状況API を組み合わせて、可視化してみたのでメモ。
なお、他の電力会社の電力使用状況データを取得できないか調べてみたところ、 yahoo の電力使用状況API 震災関連情報:電力使用状況API - Yahoo!デベロッパーネットワーク
（APIキーが必要）でないと取得できなさそうでした。 github pagesでは、APIキーを隠す手段がないので今回は使いませんでした。
サンプル
円グラフで、現在の使用状況を示しています。 棒グラフは、昨日の毎時使用量(24本)を示しています。24時間の中で最大使用量のみ赤色にしてあります。
このサンプルは、ECMA Script2015 のclass を使っており、現在Chrome42 のみ対応しています。
使用したAPI
こちら
簡単なコード解説
EcmaScript2015のclass
今回はAPIで取得した情報をEcmaScript2015 のclass を使用したオブジェクトに格納しました。 現時点では、'strict'モードで Chrome42、NightlyモードのFirefoxに対応しているようです。
作ってみたclass は、以下です。
'use strict'
class ElectricPowerInfo {
constructor(jsonp) {
this.year = jsonp.year;
this.month = jsonp.month;
this.day = jsonp.day;
this.hour = jsonp.hour;
this.capacity_TenThousandKW = jsonp.capacity; //供給可能最大電力（万kW）
this.usage_TenThousandKW = jsonp.usage; //この時間帯の消費電力（万kW）
this.usage_ratio = jsonp.usage / jsonp.capacity;
this.usage_update_DateUTC = new Date(jsonp.usage_updated + ' UTC');
this.saving = jsonp.saving;//計画停電ありならtrue
}
};
参考リンク
