今回は、canvas要素を使用して、
グラフを描画するライブラリを試してみます。

使用するライブラリはHTML5.JPで配布されているライブラリです。
こちらで配布されているライブラリは、
Internet Explorerでも使用できるよう、
ExplorerCanvas (excanvas.js) が同梱されています。

こちらのページに解説が記載されています。
ライブラリのダウンロードもこちらのページからどうぞ。

サンプルをご覧ください。
数分で棒グラフを作成することができました。

設定は非常に簡単です。
棒グラフの項目名や数値、X軸、Y軸の設定をするだけです。
詳細はこちらでご覧ください。

プロパティを設定するだけで、
グラフの形状を変更したり、文字サイズを変更したりすることができます。

サンプルでは、以下の4つのプロパティを設定しました。

• barShape: ["flat"],
  →グラフの形状
• xScaleFontSize: ["9px"],
  →x軸の目盛文字のフォントサイズ
• legend: ["false"],
  →凡例の表示・非表示
• gGradation: ["false"]
  →グラフ背景のグラデーション効果の有無

このライブラリを使用すれば、
更新のたびにグラフの画像を作成する手間を省くことができますね。