グラフを載せる場合、今までは画像で制作していたのですが、
Chart.jsというJSのライブラリで表現できるようになりました。
Chart.js を使うとこんなグラフが書けちゃいます。
Chart.js公式サイト
http://www.chartjs.org/導入方法はこちら等で参照ください
Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 | 株式会社LIG
超cool!!フラットで可愛い動きのチャートがHTML5で作れる「Chart.js」入門ガイド
Modernizr.js と ExplorerCanvas.js を使えば、IE7から対応しているのも結構重要な点だったりします。
（一応棒グラフに関してはIE6でも表示を確認しました）
さて、そちらで導入完了し、実際に表示されたものから解説いたします。
実装方法
今回は棒グラフを使用しました。
JS
//項目用の配列を定義
var array01 = [];
var array02 = [];
$(function(){
//th用の数値取得
$('#graph01 th').each(function(){
var amount01 = $(this).find('span').text();
array01.push(amount01);
})
//td用の数値取得
$('#graph01 td').each(function(){
var amount02 = $(this).find('span').text() * 100;
array02.push(amount02);
})
});
//Chart.jsの基本設定
var data = {
//th用の数値を反映させるため、配列変数挿入
labels : array01,
datasets : [
{
fillColor : "#0a50a1",
strokeColor : "#0a50a1",
pointStrokeColor : "#fff",
//td用の数値を反映させるため、配列変数挿入
data : array02
}
]
}
//Chart.jsの基本オプション
var option = {
animationEasing : "easeInOutQuart",
animation: Modernizr.canvas,
scaleShowLabels : true,
barValueSpacing : 65
}
$(function(){
new Chart(document.getElementById("demo").getContext("2d")).Bar(data, option);
});
HTML
<div class="wrap"> <p class="attention">単位：百万円</p> <!-- グラフ用キャンバス要素 --> <canvas id="demo" height="300" width="600"></canvas> <!-- 数値用表組み --> <table id="graph01"> <tr> <th><span>2011年</span></th> <td><span>250</span>億円</td> </tr> <tr> <th><span>2012年</span></th> <td><span>402</span>億円</td> </tr> <tr> <th><span>2013年</span></th> <td><span>346</span>億円</td> </tr> </table> </div>
解説
Chart.jsがIE7で表示できれば、ほぼ終わったようなものですが、解説します。
tableタグのthとtdにspanタグを入れた上でそれぞれ項目を入力します。
<th><span>2011年</span></th> <td><span>250</span>億円</td>
いったんspanで囲むことにより、「〜億円」のように、項目に他の文言が入っても、欲しい数値だけを分けることができます。
その後、jQueryにてそれぞれの項目を取得し、定義した配列にそれぞれ格納します。
//th用の数値取得
$('#graph01 th').each(function(){
var amount01 = $(this).find('span').text();
array01.push(amount01);
})
//td用の数値取得
$('#graph01 td').each(function(){
var amount02 = $(this).find('span').text() * 100;
array02.push(amount02);
})
後はChart.jsの基本設定内にある、値を設定する部分に先ほどの変数を挿入します。
//th用の数値を反映させるため、配列変数挿入 labels : array01,
//td用の数値を反映させるため、配列変数挿入 data : array02
これで完成です。
ちなみにこのまま表の行を増やしても自動的にChart.jsへ反映されますので、メンテナンス性も高いかと。
加えてCMSとも相性良いかと思いますので、コーポレートサイトにも合っていると思います。
IE6だけ未対応ですが、この表組みだと数値も入ってますしIE6なんて化石なんかもういいんじゃないかと。。
IE6なんていらないよっていうクライアントの案件なら、おすすめです！