基本的にぐーたら

プログラムを始めた学生の雑記

highcharts のあれこれ

javascriptのグラフ描画ライブラリ"highcharts"に惚れました。

chart.jsやD3.jsなどのライブラリも使ったことがあったのですが、それらに比べてhighchartsは圧倒的に使いやすいと思います。


使えば使うほど、より多くの機能を求めて止まれなくなってしまう美しさ。

まだ使い始めて1週間ですが、もうhighshartsから離れられません。

このままでは危険なトコまでいってしまいそうなので、ちょっと一休みして試しに作ったグラフの一つを投稿します。


詳しく解説した記事は既に多くの方があげられていますし、僕も後日作ろうと思うので、まずはグラフを見てみてください!


作ったグラフ


f:id:HutabaH:20170612173234p:plain:w700


こんな感じのグラフ。
今回のために作ったサンプル。

電圧と電流、電力を表示してます。
値は適当に。

日本語のタイトルがデザインをぶち壊してますね。


ソースコード


全体のコードはこんな感じ。



javascriptの最初の配列計算は電力の数値を求めているだけなので、グラフ描画に直接関係はありません。

どのコードがグラフのどの部分を表しているか分かりやすいですね。

一つずつ説明していきます。


HTML

必要なのは次の3つ。

  • jQuery
  • highcharts.js
  • exporting.js

最新版のhighchartsはjQueryなしでも動作するそうです。
exporting.jsは、グラフをpngやjpgで保存可能にする右上のボタンを追加するやつ。


javascript

基本的にはこの書き方で問題ありません。
id="container"のdiv要素にグラフが表示されます。


chart: と title:

chartオプションはグラフ全体の設定、titleオプションは表題の設定です。
subtitleオプションも付けられるけどここでは省略。
y軸が二つ以上ある場合は、alignTicksをfalseにして、軸のメモリを共有しないように設定しないと綺麗に表示されなくなります。


xAxis:


x軸の設定。
いろいろ出来るからどうすればいいか迷います。
普通はcategoriesを使うところだが、今回は線グラフで勝手に数値を振ってくれるので書いていない。
crosshairは、次のtooltipオプションに載せている図のように、ポイントしている位置を直線が出てきて教えてくれます。


yAxis:

y軸の設定。
xAxisとほぼ同じです。
ここでは、"電力"、"電圧"、"電流"の3つの軸を設定しています。
oppositeで軸を右側に移動させた場合、タイトルは内側を下に表示されます。図のように外側に向けたい場合はrotationで回転させましょう。


tooltip:


tooltipオプションは、カーソルを合わせた時に表示される窓の事です。


f:id:HutabaH:20170612173233p:plain:w600


こういうやつ。
ここではformatterに簡単な関数を仕込んで、ラインごとに表示される内容を変えています。

電流に合わせるとこうなる。

f:id:HutabaH:20170612173232p:plain:w600

こういったライブラリは簡単に書き込めるから楽でいいですね。


plotOptions:

plotOptionsはその名の通り、プロットの設定。
グラフが'spline'モードで描画されているので、spline{}の中に記述している。
series/marker/enableをfalseにすることで、ポイントを表示しないようにしている。
電気が流れているように見えるかなと思って、animationも付け加えています。


legend:

legendはグラフの注釈設定。
どの線がどの値を表しているか表示している。
layout: 'horizontal'で横列、'vertical'で縦列に並ぶ。
alignとverticalAlignで位置を設定できるけど、floatingをtrueにしてしまえばグラフ中どこでもxyで移動できるので関係ないですね。


series

seriesはグラフの中身の設定です。
軸を複数設定している場合は、yAxisで対応する軸の番号を指定しないといけません。

順番が遅い方が前面に表示されるので、ここでは電力を手前にすべく一番最後に書いています。
設定で指定できるかも。


credits

右下に表示されるクレジットを削除します。


最後に

正直、公式リファレンス見るのが一番詳しくて正確なんですけど、量多すぎて目的の機能を探すのが面倒だし英語だしで、ちょっとやる気が萎えちゃいます。

毎回調べるのも時間がもったいないので、個人的なメモとして書かせていただきました。

誰か日本語訳してくれないかなぁ。