2010年12月8日水曜日

Highcharts

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

Highcharts

とりあえず、サンプルソースはこちら
view plainprint?
  1. <html>  
  2.  <head>  
  3.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  4.   <title>Highcharts Example</title>  
  5.     
  6.   <script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script>  
  7.   // highcharts.js読み込み  
  8.   <script type="text/javascript" src="../../js/highcharts.js"></script>  
  9.   // デザイン用js読み込み。無くてもOK  
  10.   <script type="text/javascript" src="../../js/themes/gray.js"></script>  
  11.   // 詳しくは見れてないですが、コレも必要  
  12.   <script type="text/javascript" src="../../js/modules/exporting.js"></script>  
  13.   <script type="text/javascript">  
  14.     
  15.    var chart;  
  16.    $(function() {  
  17.     chart = new Highcharts.Chart({  
  18.      chart: {  
  19.       // グラフを表示する領域を指定  
  20.       renderTo: 'container',  
  21.       // グラフのタイプを指定  
  22.       defaultSeriesType: 'bar'  
  23.      },  
  24.      title: {  
  25.       text: 'Historic World Population by Region'  
  26.      },  
  27.      subtitle: {  
  28.       text: 'Source: Wikipedia.org'  
  29.      },  
  30.      xAxis: {  
  31.       // グラフの縦軸の項目名を指定  
  32.       categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],  
  33.       title: {  
  34.        text: null  
  35.       }  
  36.      },  
  37.      yAxis: {  
  38.       min: 0,  
  39.       title: {  
  40.        text: 'Population (millions)',  
  41.        align: 'high'  
  42.       }  
  43.      },  
  44.      tooltip: {  
  45.       // グラフにマウスを乗せたときのtooltipの表示を指定  
  46.       formatter: function() {  
  47.        return ''+  
  48.          this.series.name +': '+ this.y +' millions';  
  49.       }  
  50.      },  
  51.      plotOptions: {  
  52.       bar: {  
  53.        dataLabels: {  
  54.         enabled: true  
  55.        }  
  56.       }  
  57.      },  
  58.      legend: {  
  59.       layout: 'vertical',  
  60.       align: 'right',  
  61.       verticalAlign: 'top',  
  62.       x: -100,  
  63.       y: 100,  
  64.       floating: true,  
  65.       borderWidth: 1,  
  66.       backgroundColor: '#FFFFFF',  
  67.       shadow: true  
  68.      },  
  69.      credits: {  
  70.       enabled: false  
  71.      },  
  72.       // 表示したいデータをJSON形式で指定  
  73.      series: [{  
  74.       name: 'Year 1800',  
  75.       data: [107, 31, 635, 203, 2]  
  76.      }, {  
  77.       name: 'Year 1900',  
  78.       data: [133, 156, 947, 408, 6]  
  79.      }, {  
  80.       name: 'Year 2008',  
  81.       data: [973, 914, 4025, 732, 34]  
  82.      }]  
  83.     });  
  84.    });  
  85.   </script>  
  86.  </head>  
  87.  <body>  
  88.   <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>  
  89.  </body>  
  90. </html>  

デモはこちら

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

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

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


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