jQueryでグラフ作成
2009.12.04 Author: えす
jQueryでグラフ表示 jQueryのライブラリでグラフを簡単に生成できるものがありましたので紹介します。
「jqPlot」というライブラリです。
折れ線グラフ、円グラフ、棒グラフなどの表示ができます。見た目も結構キレイにでます。
今回は、棒グラフの日本語情報があまりなかったので、棒グラフについて紹介します。
まずは簡単なサンプルです。
尚、IEにはexcanvas.jsを使用しています。
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5: <link rel="stylesheet" type="text/css" href="js/jquery.jqplot/dist/jquery.jqplot.min.css" />
6: <!--[if IE]>
7: <script type="text/javascript" src="js/excanvas.js" ></script>
8: <![endif]-->
9: <script type="text/javascript" src="js/jquery.js"></script>
10: <script type="text/javascript" src="js/jquery.jqplot/dist/jquery.jqplot.min.js"></script>
11: <script type="text/javascript" src="js/jquery.jqplot/dist/plugins/jqplot.dateAxisRenderer.js"></script>
12: <script type="text/javascript" src="js/jquery.jqplot/dist/plugins/jqplot.barRenderer.js"></script>
13: <script type="text/javascript" src="js/jquery.jqplot/dist/plugins/jqplot.categoryAxisRenderer.js"></script>
14: <script type="text/javascript">
15: <!--
16: var sales = [
17: ["1月", 1525],
18: ["2月", 348],
19: ["3月", 3927],
20: ["4月", 6010],
21: ["5月", 7693],
22: ["6月", 6162],
23: ["7月", 4525],
24: ["8月", 5723],
25: ["9月", 3743],
26: ["10月", 3075],
27: ["11月", 2128],
28: ["12月", 1734]
29: ];
30:
31: $(function(){
32: $.jqplot('graph1', [sales], {
33: seriesDefaults:{
34: renderer : $.jqplot.BarRenderer,
35: color : "#4796EF"
36: },
37: title : {
38: text : "月別販売数",
39: fontSize : "15px"
40: },
41: axes : {
42: xaxis : {
43: renderer:$.jqplot.CategoryAxisRenderer
44: },
45: yaxis : {
46: min : 0,
47: max : 10000,
48: tickOptions : {
49: formatString : '%d'
50: },
51: numberTicks : 11
52: }
53: }
54: });
55: });
56: //-->
57: </script>
58: </head>
59: <body>
60: <div id="graph1" style="width:500px; height:200px;"></div>
61: </body>
62: </html>
16行目 salesにはx軸ごとに「タイトル」、「値」を配列で代入しています。
var sales = [
["1月", 1525],
...
];
32行目 $.jqplot()でグラフの描画をします。
$.jqplot('<グラフを描画するDIVのID>', [<グラフデータの配列>], {<グラフの設定>});
32～54行目までが、グラフ描画の設定になります。
33行目 seriesDefaultsにはバーのデフォルト設定をします。
color : "#4796EF" でバーの色を指定しています。
seriesDefaultsには主に下記を設定できます。
renderer : $.jqplot.BarRenderer // 棒グラフを表示するときは「$.jqplot.BarRenderer」を指定
color : "#4796EF" // バーの色
lineWidth : 1.5 // バーの太さ
shadow : true // 影を表示する・しない
showLine : true // バーを表示する・しない
バーを複数表示する際は、バーごとに個別設定をすることができます。
これについては後日記述予定です。
37行目 titleにはグラフのタイトルを設定します。
title : "月別販売数" でグラフのタイトルを
fontSize : "15px" でタイトルのフォントサイズを指定しています。
seriesDefaultsには主に下記を設定できます。
show : true // タイトルを表示する・しない
fontFamily : "ＭＳ ゴシック" // バーのフォント指定
twxtAlign : "center" // タイトルの表示位置
textCofor : "#000000" // タイトルの色
41行目 axesでX軸、Y軸の設定をします。
X軸はxaxis、Y軸はyaxisに記述します。
yaxisのmin,maxでY軸の最大・最小値を指定しています。
tickOptionsのformatStringでは小数点表示が不要なため、整数で表示するよう指定しています。
numberTicksではY軸のメモリを何分割で表示するかを指定しています。
たったこれだけの設定で下のようなグラフが表示できてしまいます。
次回、もう少し細かい使い方を紹介します。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
