「jQueryラブ」な私たちですが、最近jQueryから徐々にフェードアウトしようと試みてみます。

今回　某API の複数データを1ページで見られるようにするプロジェクトが進んでおり、そのプロジェクトもjQueryを廃止しています。 今回このプロジェクトの中でグラフの描画部分があり、何かよさそうなグラフライブラリを探したのですが大体jQueryが必須なんですよね。 その中で、全くライブラリを使わない javascript だけで動くライブラリが今回タイトルにある「Highcharts」です。

www.highcharts.com

こちらが公式です。

今回はHighchartsのチャート関連の描画があるHighchartsを使ったのですが、他にも地図系の描画があるHighmapsというのもあるみたいなので、機会があれば導入してみたいと思います。

ドキュメントの翻訳が無いので、探り探りにはなりますが、コードの例とかがかなり用意されてますので雰囲気でなんとかなります。 英語圏でのシェアはあるので、Stack over flow とかでGoogle翻訳片手に探すのもアリですね。

最後に日ごとのグラフ描画をする際すこし手間取ったのでその時のコードを乗せていきます。

var graph = new Highcharts.chart(selector, {
title: {
text: title // 表題
},
xAxis: {
type: 'datetime' // x軸を日付とする
},
plotOptions: {
series: {
pointStart: Date.UTC(year, month+1, day), // x軸のスタートはいつか
pointInterval: 24 * 3600 * 1000 // one day // 1メモリを一日とする(秒数)
}
},
series: series,
tooltip: {
pointFormat: '{point.y:.'+padding+'f}' + unit
},
});

pointInterval部分の秒数指定が中々探せず苦労したので、もしHighchartを使う機会があれば役立ててください。 今段階で折れ線グラフだけですが、今後円グラフ等も使っていくのでブログネタとして使っていこうと思います。

全く別件で地図描画で思い出したのですが、セキュリティ会社「カスペルスキー」が公開している全世界のサイバー攻撃の状態が可視化できるサイトです。

cybermap.kaspersky.com

いつかこういった物を作れる技術者になりたいとしみじみ思いますね。