javascriptでグラフを作成する「WebFX」

サイトでグラフを使用したい時、イラストレーターでいちいち書いて画像にするのは面倒です。
そこで、WebFXで紹介されているjavascriptを使用します。
これを使うと、線グラフや棒グラフ、積み上げ式棒グラフ、全てを組み合わせたグラフを作成することができます。
webfx

【WebFXの使い方】
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引数は横軸分の縦軸の数値)
結果はWebFXサンプルページに掲載しています。
今回紹介していたのは積み上げ式の線グラフ(?)ですが、3行目で指定するc.setDefaultType(CHART_AREA | CHART_STACKED);の()内を
線グラフではCHART_LINE、棒グラフではCHART_BARとすることで作成することができます。

sponsors

「javascriptでグラフを作成する「WebFX」」をシェアする

記事作成:
記事URL:

TOP > > > javascriptでグラフを作成する「WebFX」