このサイトでもいくつか使用しているチャート生成ライブラリ「amCharts」。
Flashを使って簡単にグラフを表示でき、柔軟にデザインできるので重宝しています。

使用例

「消費者物価指数(CPI)」をグラフ化してみた(2005年1月以降) - nplll


そのamChartsにFlashを使用せず、
JavaScript/HTML5でグラフを描き出すバージョンが加わっていたので試しに使ってみました。

サンプル


ドキュメントが英語でしかも結構わかりづらいので最低限の設定だけしています。
グラフ上で右クリックすれば、これがFlashではないのがわかると思います。




ソース

基本的にはWeb上のサンプルと同梱のサンプルを参考にしています。
データは配列形式で記述。データ、設定共に別ファイルに分けて読み込むことが出来ます。

<div id="chartdiv" style="width:590px; height:240px;"></div>

<script type="text/javascript" src="//nplll.com/static/js/lib/amcharts/amcharts.js"></script>
<script type="text/javascript" src="//nplll.com/static/js/lib/amcharts/raphael.js"></script>
<script type="text/javascript">
var chartData = [
  {date:new Date('2011/4/14'), value:6231},
  {date:new Date('2011/4/15'), value:11056},
  {date:new Date('2011/4/16'), value:5171},
  {date:new Date('2011/4/17'), value:10924},
  {date:new Date('2011/4/18'), value:11283},
  {date:new Date('2011/4/19'), value:7542},
  {date:new Date('2011/4/20'), value:11054},
  {date:new Date('2011/4/21'), value:3770},
  {date:new Date('2011/4/22'), value:9994},
  {date:new Date('2011/4/23'), value:11011},
  {date:new Date('2011/4/24'), value:10169},
  {date:new Date('2011/4/25'), value:11401},
  {date:new Date('2011/4/26'), value:10600},
  {date:new Date('2011/4/27'), value:5388},
  {date:new Date('2011/4/28'), value:10907},
  {date:new Date('2011/4/29'), value:6622},
  {date:new Date('2011/4/30'), value:11085},
  {date:new Date('2011/5/1'), value:6003},
  {date:new Date('2011/5/2'), value:11383},
  {date:new Date('2011/5/3'), value:5817},
  {date:new Date('2011/5/4'), value:11201},
  {date:new Date('2011/5/5'), value:10388},
  {date:new Date('2011/5/6'), value:7668},
  {date:new Date('2011/5/7'), value:10907},
  {date:new Date('2011/5/8'), value:10403},
  {date:new Date('2011/5/9'), value:10018},
  {date:new Date('2011/5/10'), value:11016},
  {date:new Date('2011/5/11'), value:11055},
  {date:new Date('2011/5/12'), value:11054},
  {date:new Date('2011/5/13'), value:11099}
];

(function() {
  /* 基礎設定 */
  var chart = new AmCharts.AmSerialChart();
  chart.dataProvider      = chartData;    /* データ配列 */
  chart.pathToImages      = '/images/';   /* イメージフォルダ */
  chart.categoryField     = 'date';       /* X軸の要素名 */
  chart.marginTop         = 30;           /* グラフの上マージン */
  chart.marginRight       = 0;            /* グラフの右マージン */
  chart.marginBottom      = 20;           /* グラフの下マージン */
  chart.marginLeft        = 60;           /* グラフの左マージン */
  chart.panEventsEnabled  = true;
  /* X軸 */
  var catAxis             = chart.categoryAxis;
  catAxis.parseDates      = true;         /* X軸が日付かどうか */
  catAxis.minPeriod       = 'DD';         /* X軸の単位 */
  catAxis.inside          = false;        /* X軸のラベルをグラフの内部に描くかどうか */
  catAxis.gridAlpha       = 0.25;         /* 縦軸補助線の透過度 */
  catAxis.dashLength      = 5;            /* 縦軸補助線の点線のスタイル */
  catAxis.tickLength      = 0;
  /* Y軸 */
  var valueAxis           = new AmCharts.ValueAxis();
  valueAxis.dashLength    = 4;            /* 横軸補助線の透過度 */
  valueAxis.axisAlpha     = 0;            /* 横軸の透過度 */
  chart.addValueAxis(valueAxis);
  /* グラフ設定 */
  var graph               = new AmCharts.AmGraph();
  graph.valueField        = 'value';      /* 値の要素名 */
  graph.type              = 'line';       /* グラフの種類 */
  graph.lineColor         = '#ff0000';    /* グラフの線の色 */
  graph.lineThickness     = 3;            /* グラフの線の太さ */
  chart.addGraph(graph);

  var chartCursor = new AmCharts.ChartCursor();
  chart.addChartCursor(chartCursor);

  chart.write('chartdiv');
})();
</script>



ダウンロード/インストール

amChartsから「amCharts Flash & JavaScript bundle」をダウンロード。

amCharts: Download flash charts and graphs

ダウンロードしたら解凍して、ファイルを配置。
最低限「amcharts.js」「raphael.js」の2つを配置すればOK。


ブラウザ毎の動作状況

  • Internet Explorer 8 → ○
  • Firefox 4.01 → ○
  • Google Chrome 11 → ○
  • Safari 5.05 → ○
  • Opera 11.01 → ○

サイトに書いてあるとおり、モダンブラウザなら問題なく動くようです。iPhoneでも確認できました。

Our JavaScript charts support all modern browsers including (but not limited to) modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer. It also runs on mobile devices powered by iOS (iPad, iPhone, iPod Touch) and Android Honeycomb. It demonstrates stellar performance in hardware-accelerated Internet Explorer 9 which reaffirms it's bright future.

案外さくさく動きますね。

古いブラウザを考慮しなくて良い環境であれば、便利かも知れません。
  • About

    I'm a web designer/programmer in Kyoto, Japan. Also work as a blogger, DJ.

    NOBODY:PLACE is my personal blog since 1998. Everything I'm interested in is here.

    See Also
    Other Works
    Feed
  • Recent Hatena Bookmark
  • Monthly Archives
    Categories