Javascriptでグラフ作成する「WebFX」

サイトでグラフを使用したい時、イラストレーターでいちいち書いて画像にするのは面倒です。
そこで、WebFXのjavascriptライブラリを使用してみます。

sponsors

使い方

excanvas.jschart.jscanvaschartpainter.jsの3つのjavascriptに加え、canvaschart.cssをhead内に挿入します。
さらにグラフを表示したい場所に<div id="chart" class="chart" style="width: 450px; height: 300px;"></div>を書きます。
ここで指定した、幅(width)と高さ(height)が表示されるグラフの大きさです。
次にグラフの中身を<script type="text/javascript"></script>に書きます。
1: function draw() {
2: var c = new Chart(document.getElementById('chart'));
3: c.setDefaultType(CHART_AREA | CHART_STACKED);
4: c.setGridDensity(7, 6);
5: c.setVerticalRange(0, 250);
6: c.setHorizontalLabels(['2001', '2002', '2003', '2004', '2005','2006','2007']);
7: c.add('-19歳', '#4040FF', [ 20, 25, 35, 40, 60 , 70 ,75]);
8: c.add('20-29歳', '#8080FF', [ 30, 30, 25, 20, 44 , 50 ,55]);
9: c.add('30-39歳', '#A5A5FF', [ 10, 15, 16, 20, 25 ,26 ,30]);
10: c.add('40-歳', '#DEDEFF', [ 15, 20, 15, 20, 20 , 30 ,31]);
11: c.draw();
12: }
13:
14: window.onload = function() {
15: draw();
16: };
4行目では、順に横軸と縦軸の項目数を指定。(サンプルでは横7、縦6)
5行目では、縦軸の最低数値と最高数値を指定。(サンプルでは最小0、最大250)
6行目では、横軸のラベルを指定。(サンプルでは横7なので7項目分)
7〜10行目では、グラフの項目を指定。(第1引数はラベル名、第2引数は色、第3引数は横軸分の縦軸の数値)

サンプル結果

今回紹介しているのは積み上げ式の線グラフ(?)です。
他にも、普通の線グラフや棒グラフがあり、3行目で指定するc.setDefaultType(CHART_AREA | CHART_STACKED);の()内を
線グラフ:CHART_LINE
棒グラフ:CHART_BAR
で作成することができます。
詳細はJavascriptでグラフ作成する「WebFX」補足解説

sponsors

Javascriptサンプルページ一覧
skuare.net