Highchartsについてのメモ

JavaScript

本日は JavaScript でグラフが簡単に書けるようになるライブラリ「Highchatrs」についてです。

出来上がるグラフは非常に綺麗で、細かい設定も多々できるのですが、なによりびっくりするほど簡単にグラフが作成できます。 ちなみに使うには jQuery が必要です。

どれほど簡単かと言うと、

1 . HTML の記述

Highchatsはjsファイルを１つ読み込むだけでOKです。

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="chart"></div>

2 . JavaScriptの記述

グラフを表示したい要素に対し highchats を実行し必要なパラメータを渡します。

$(function () {
    $('#chart').highcharts({
        series: [
            {data: [1,3,5,7,9,10,8,6,4,2]},
            {data: [4,5,6,7,8,9,10]}
        ]
    });
});

これだけでグラフが出来上がります！ こんな感じです。素晴らしいですね！

これなら色々作ってみたくなりますね〜