覚え書き: 12月 2010

最近、個人的に作っているWebアプリでグラフを書きたくなったので、
何かいいグラフ書くもの無いかなーと探してたら、見つけたのでちょっと紹介させていただきます。

Highcharts

とりあえず、サンプルソースはこちら

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Highcharts Example</title>
  
  <script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script>
  // highcharts.js読み込み
  <script type="text/javascript" src="../../js/highcharts.js"></script>
  // デザイン用js読み込み。無くてもOK
  <script type="text/javascript" src="../../js/themes/gray.js"></script>
  // 詳しくは見れてないですが、コレも必要
  <script type="text/javascript" src="../../js/modules/exporting.js"></script>
  <script type="text/javascript">
  
   var chart;
   $(function() {
    chart = new Highcharts.Chart({
     chart: {
      // グラフを表示する領域を指定
      renderTo: 'container',
      // グラフのタイプを指定
      defaultSeriesType: 'bar'
     },
     title: {
      text: 'Historic World Population by Region'
     },
     subtitle: {
      text: 'Source: Wikipedia.org'
     },
     xAxis: {
      // グラフの縦軸の項目名を指定
      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
      title: {
       text: null
      }
     },
     yAxis: {
      min: 0,
      title: {
       text: 'Population (millions)',
       align: 'high'
      }
     },
     tooltip: {
      // グラフにマウスを乗せたときのtooltipの表示を指定
      formatter: function() {
       return ''+
         this.series.name +': '+ this.y +' millions';
      }
     },
     plotOptions: {
      bar: {
       dataLabels: {
        enabled: true
       }
      }
     },
     legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -100,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: '#FFFFFF',
      shadow: true
     },
     credits: {
      enabled: false
     },
      // 表示したいデータをJSON形式で指定
     series: [{
      name: 'Year 1800',
      data: [107, 31, 635, 203, 2]
     }, {
      name: 'Year 1900',
      data: [133, 156, 947, 408, 6]
     }, {
      name: 'Year 2008',
      data: [973, 914, 4025, 732, 34]
     }]
    });
   });
  </script>
 </head>
 <body>
  <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
 </body>
</html>

デモはこちら

こんな感じに、簡単にできます。
オプションの簡単な説明をすると、まず

22行目
グラフのタイプを指定します。
"line"と指定すると折れ線グラフになったり、"colum"と指定すると上下の棒グラフになります。

73行目
seriesというオブジェクトにJSON形式でデータを定義してあげます。
nameとdataというKEY値で指定してあげてください。

横軸のメモリとかは、データの大きさによって自動でスケールアウトしたり、
グラフの項目名をクリックすると、その項目を非表示にできたりとかなりいろいろできるので
おすすめです。今回は紹介していないですが、自動で時間経過に応じてグラフを描画するなんてことも
できるので、かなりUI的に良いものができそうです。今度はそっちの紹介でもしようかなー。

2010年12月8日水曜日

Highcharts