前回の続き。
引き続きdojox.charting.Chart2Dを使います。
前回は単にグラフを出しただけですが、あれだと何のグラフだかわかりません。
ラベルやその他のプロパティを色々指定できるみたいなので試してみます。
まあほとんどサンプルで書かれてるやつそのまんまなのですが。
http://codezine.jp/article/detail/5547?p=3
http://codezine.jp/article/detail/5547?p=4
引き続きdojox.charting.Chart2Dを使います。
前回は単にグラフを出しただけですが、あれだと何のグラフだかわかりません。
ラベルやその他のプロパティを色々指定できるみたいなので試してみます。
まあほとんどサンプルで書かれてるやつそのまんまなのですが。
http://codezine.jp/article/detail/5547?p=3
http://codezine.jp/article/detail/5547?p=4
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.PurpleRain");
var drawChart = function(){
//Chart2Dオブジェクト
var myChart = new dojox.charting.Chart2D("myChart");
//折れ線グラフ
var revenues2008 = [13000, 13000, 13000, 15000, 16000, 17000, 27000, 30000, 38000, 38000, 25000, 23000];
var revenues2009 = [27000, 30000, 30000, 35000, 40000, 45000, 46000, 42000, 37000, 35000, 38000, 40000];
myChart.addPlot("default", {type: "Lines"});
myChart.addSeries("2008年度売上高", revenues2008);
myChart.addSeries("2009年度売上高", revenues2009);
//棒グラフ
var contracts2008 = [11, 12, 11, 20, 22, 20, 32, 30, 35, 30, 10, 5];
var contracts2009 = [20, 17, 21, 31, 41, 41, 31, 28, 21, 20, 32, 33];
myChart.addPlot("columns", {type: "ClusteredColumns", vAxis: "right", gap: 5});
myChart.addSeries("2008年度新規契約数", contracts2008, {plot: "columns"});
myChart.addSeries("2009年度新規契約数", contracts2009, {plot: "columns"});
//ラベル
var labels = [
{value: 1, text: "4月"}, {value: 2, text: "5月"},
{value: 3, text: "6月"}, {value: 4, text: "7月"},
{value: 5, text: "8月"}, {value: 6, text: "9月"},
{value: 7, text: "10月"}, {value: 8, text: "11月"},
{value: 9, text: "12月"}, {value: 10, text: "1月"},
{value: 11, text: "2月"}, {value: 12, text: "3月"}
];
myChart.addAxis("x", {majorTickStep: 1, natural: true, labels: labels});
myChart.addAxis("y", {vertical: true, fixUpper: "micro", includeZero: false});
myChart.addAxis("right", {vertical: true, leftBottom: false, fixUpper: "major", includeZero: true});
//プロット(格子)
myChart.addPlot("grid", {type: "Grid"});
//テーマ(色)
myChart.setTheme(dojox.charting.themes.PurpleRain);
// グラフを描画
myChart.render();
}
//起動時実行
dojo.addOnLoad(drawChart);
</script>
</head>
<body>
<div id="myChart" style="width: 400px; height: 200px;"></div>
</body>
</html>
まずdojox.charting.Chart2Dのオブジェクトを作成し、その中に表示したいグラフの種類をaddPlotで突っ込みます。
今回使用したのは"Lines"の折れ線グラフ、"ClusteredColumns"の棒グラフ、"Grid"の格子です。
他にも"StackedColumns"の積み上げグラフ、"Pie"の円グラフなど多くの種類が用意されています。
今回使用したのは"Lines"の折れ線グラフ、"ClusteredColumns"の棒グラフ、"Grid"の格子です。
他にも"StackedColumns"の積み上げグラフ、"Pie"の円グラフなど多くの種類が用意されています。
addSeriesで具体的なデータを投入します。
このとき第三引数にplotを指定していれば該当のプロットに、無ければdefaultのプロットにあてがわれることになります。
例の場合売上高はデフォルトの"default"プロットに、新規契約数は"columns"のプロットに入っているのがわかります。
まあ何の売上高なのか新規契約数なのかはわかりませんが。
addAxisでグラフの目盛りを指定します。
引数によって目盛りの間隔や原点の値を変更したりすることができます。
定義とかはdojox.charting.axis2d.Defaultに書いてあるみたいなんだけどよくわかりませんでした。
dojox.charting.axis2d.Invisibleとか何なんだろう？
setThemeで全体のテーマを指定します。
今回は"PurpleRain"というテーマを指定しています。
テーマはdojox/charting/themes/に30種類以上用意されていますが、気に入らなければ自分でCSSをセットすることも出来るようです。
ちなみに指定しないと白黒になります。
最後にrenderで描画。
こんな見事なグラフが一切画像を使わずにできあがります。
どうでもいいがこのグラフ、IE6でもきちんと表示されるんだが一体どんな超技術を使ってるんだ。
PR
トラックバック
トラックバックURL:
