忍者ブログ
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。



2017/11/19 14:03 |
Dojo1.6.1 dojo Dojo道場02 dojox.charting.Chart2DのkwArgs
前回の続き。
引き続き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"の円グラフなど多くの種類が用意されています。

 

addSeriesで具体的なデータを投入します。
このとき第三引数にplotを指定していれば該当のプロットに、無ければdefaultのプロットにあてがわれることになります。
例の場合売上高はデフォルトの"default"プロットに、新規契約数は"columns"のプロットに入っているのがわかります。
まあ何の売上高なのか新規契約数なのかはわかりませんが。

addAxisでグラフの目盛りを指定します。
引数によって目盛りの間隔や原点の値を変更したりすることができます。
定義とかはdojox.charting.axis2d.Defaultに書いてあるみたいなんだけどよくわかりませんでした。
dojox.charting.axis2d.Invisibleとか何なんだろう?

setThemeで全体のテーマを指定します。
今回は"PurpleRain"というテーマを指定しています。
テーマはdojox/charting/themes/に30種類以上用意されていますが、気に入らなければ自分でCSSをセットすることも出来るようです。
ちなみに指定しないと白黒になります。

最後にrenderで描画。
こんな見事なグラフが一切画像を使わずにできあがります。
どうでもいいがこのグラフ、IE6でもきちんと表示されるんだが一体どんな超技術を使ってるんだ。
 

 
PR


2011/06/06 22:13 | Comments(0) | TrackBack(1) | JavaScript

トラックバック

トラックバックURL:
前回の続き。 前回まではJavaScriptで完全にグラフを作成してから<div>に突っ込んでましたが、これとは別に、JavaScriptをほとんど書かないでいい使い方もあります。 HTMLに値を書いておいてそれを使ってグラフを作成、という方法です。 むしろ適当に属性を書いておくだけでdojoが勝手にグラフ化してしまいます。 HTMLを作成。 <html> <head> <meta http-equiv="Conte...
弱小PHPerの憂鬱 | 2011/06/10 23:13

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<SCE開発ネットワークのソースコード流出? | HOME | 買ったものリスト 2011/06/05>>
忍者ブログ[PR]