Highchartsを使ってグラフを表示しよう！ #JavaScript

この記事はリクルートライフスタイル Advent Calendar 2015 -
Qiitaの10日目です。

ホットペッパービューティーで開発を担当している中村大騎＠ムーチョです。
SAStruts＋社内フレームワークやJavaScriptを利用した画面の開発をしています。
社会人3年目とまだまだ経験は浅い私ですが、
IntelliJ IDEAを使わせてもらったり、Confluence等を使って情報共有することの大切さを学んだりと、
ホットペッパービューティーの開発で色々な体験をさせていただいてます。

今日は、その中の１つである「Highcharts」について
導入時の簡単な振り返りをしつつ、アレコレ書いていこうと思います！

はじめに

皆さんはデータを集めていますか？？その集めたデータをどうしていますか？
データを集めて眺めるだけでは素晴らしいアイデアはきっと生まれてこないでしょう。
では、データから価値のあるアイデアを生み出すにはどうしたらいいのか。。。

まずは、データを加工することから始めてみましょう！！
手段は色々あります。
例えば、グラフにしてみたり、グラフにしてみたり、グラフ・・・・

そうです。
今日書こうと思っている「Highcharts」は、グラフ描画用のライブラリのことなんです。

Highchartsとは

HighchartsはWebでグラフを表示するためのJavaScriptライブラリです。
線グラフ、スプライングラフ、棒グラフ、円グラフ、分布グラフ、ファンネルグラフなど、
よく使われるグラフは全てサポートしています。(ファンネルグラフ、、よく使わねーかw)
また、3Dモードやグラフをドリルダウンできたりと機能面でも素晴らしい！！
そして、なにより見た目が凄く美しいです。DEMO

A子さん：｢ぇー、でも実装とか難しいんでしょー(泣)｣

そんなことありません！！
私が3分で実装して見せましょう(σº∀º)σ

html

<html>
<head>
    <title>sample</title>
</head>
<body>
<!-- 描画領域 -->
<div id="chart" style="width:300px; height:300px;"></div>

<!-- ライブラリ読み込み -->
<script src="./js/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="./js/Highcharts/highcharts.js" charset="UTF-8"></script>
<script type="text/javascript">
<!--
// ↓↓ここ注目
$('#chart').highcharts({
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 129.2, 129.2]
    }]
});
// -->
</script>
</body>
</html>

ほら！簡単でしょ！！（タイトルとか設定してないけどｗ

商用は有料(結構高い)となってしまいますが、それ以外であれば無料で使えます。
まぁ、有料に見合うだけのメリットも大量にあるので、商用として使うのもオススメです！
(Highchartsのお客様例：Facebook、Twitter、Yahoo、IBM、NASAなど有名な企業がたくさん！)

あ、ステマじゃないですよww

振り返り

実装の説明をしても良かったのですが、無限大なのでこっちを見てもらうとして、
今回は導入した際の振り返りっぽくいこうと思います。
実装の説明は私のブログにいつかまとめます。（書いた時は、是非見てください！

良かったこと

画面のインパクトが全然違う
Highchartsはブラウザに応じてレンダリングエンジンを変えています。←ここ重要
よって、どんなブラウザでも凄く綺麗に描画してくれます。(今は亡きIE6でも)
画面を開くとアニメーションをしながらグラフが出てくるだけで、インパクトが全然違ってきます。
今回の導入時は、デザイナーさんがバッチリ配色してくれたので非常に凄く美しい画面に仕上がったと思います。
開発効率の向上
Highchartsを導入する前に、最近話題？のd3.jsを使ってグラフを描いてみました。
(d3.js用のグラフプラグイン等を使わずに。)
簡単なグラフを1つ描画するのに6時間ほどかかってしまいました。
一方、同じグラフをHighchartsで実装してみると30分で描画まで至りました。
この違いは大きいですね。
情報量も豊富で、ググれば案外なんでも解決できるのもイイネ！
デフォルト設定で多機能すぎるので、殆どのグラフは色くらいしか弄ってません。

失敗したこと

APサーバ⇔Highchartsまでのデータ構造
APサーバからクライアントに返すデータ構造に一部Highchartsで使用するキーワードを含めていました。
そのため、Highchartsで設定を変えるためにAPサーバの実装をいじらないといけない状況に・・・
APサーバからHighchartsに渡すデータはシンプルにして、JS側でHighcharts用のJSONに加工したほうがよかったですね。。（反省
テーマファイルが活かせなかった
Highchartsには、テーマファイルというのがあります。
グラフのデザイン系はテーマファイルにまとめて一括管理できるのですが、
今回それを活かすことができませんでした。
デザインを共通して設定できるメリットは大きいですが、個々に細かいデザイン要件がある場合、
どう切り出すかが設計のポイントになりそうですね。
次回、導入機会があったらチャレンジしてみよう。

まとめ

今回、導入検討〜実装までを担当して感じた事はただ一つ。
「Highchartsでグラフ出すの超たのしいいいいいい！」です！
私は設定をいじくってるだけですが、みんなが凄いって言ってくれますｗ
いくらか失敗もしましたが、出来上がった画面の印象は非常にインパクトがあります。
Webページの印象を一瞬で変えることのできるグラフを、凄く簡単に実装できてしまう
Highchartsは1度触ってみる事をオススメします。（無料だし）

ちなみに、
設定でできない事をしようとすると、凄く複雑になってしまいます。
なるべく設定で可能な範囲でグラフを描画するようにしたほうが良いと思います。

小学生の感想文みたいになってしまいましたが、
以上でHighchartsの説明は終わりです。

今回初めて「Advent Calendar」という存在を知り、初めてQiitaの投稿をしました。
なんか緊張しますね！これを機に、Qiitaへの投稿も定期的にしていこうかな。

おわり