JavaScriptでリッチっぽいグラフ書きたいから書いた

highcharts.js

http://www.highcharts.com/

公式のデモとかドキュメントを参考に簡単なラインチャートを作ってみます。

まずはhead内に。DLして配置しなくても使わせてくれるからナイス。

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

次にグラフを置きたいところにdivを置いておく。

   <div id="linechart" style="width:500px ; height:500px"></div>

そして、jQuery。

jQueryよくわかんないけど、とりあえず書いてみます。 データは適当です。

 $(function() {
        $('#linechart').highcharts({
          chart: {
            type: 'line'
          },
          title: {
            text: 'Highcharts Demo'
          },
          subtitle: {
            text: 'Subtitle'
          },
          xAxis: {
          },
          yAxis: {
            title: {
              text: "Number of View"
            }
          },
          series: [
          {
            name: '2013',
            data: [
            [0,4],
            [1,5],
            [2,9],
            [3,2],
            [4,3],
            [5,7],
            [6,11],
            [7,6],
            [8,10],
            [9,9],
            [10,12],
            ]
          },
          {
            name: '2012',
            data: [
            [0,2],
            [1.4,8],
            [2.5,6],
            [3.2,5],
            [4.6,5],
            [5.4,8],
            [6.1,10],
            [7.7,9],
            [8.6,11],
            [9.1,6],
            [10.4,9],
            ]
          },
          ]
        })
      });

ブラウザから見た結果(画像クリックでHTMLページに移動します)

アニメーションもしてくれるので難しいコードを書かずともリッチっぽい図やグラフを使えて捗る。

とりあえずラインチャートだけ使いたかったから簡単にまとめました。