Dojo1.6.1 dojo Dojo道場03 グラフウィジェット

[PR]

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

2024/11/23 20:22 |

前回の続き。

前回まではJavaScriptで完全にグラフを作成してから<div>に突っ込んでましたが、これとは別に、JavaScriptをほとんど書かないでいい使い方もあります。
HTMLに値を書いておいてそれを使ってグラフを作成、という方法です。

むしろ適当に属性を書いておくだけでdojoが勝手にグラフ化してしまいます。

HTMLを作成。

<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.widget.Chart2D");
	</script>
</head>
<body>
	<div dojoType="dojox.charting.widget.Chart2D" id="myChart" style="width: 400px; height: 200px;">
	    <div class="plot" name="default" type="Lines" tension="3"></div>
	    <div class="series" name="2008年度売上高" stroke="{color: 'red', width: 2}"
		data="13000, 13000, 13000, 15000, 16000, 17000, 27000, 30000, 38000, 38000, 25000, 23000"></div>
	    <div class="series" name="2009年度売上高" stroke="{color: 'green', width: 3}"
			data="27000, 30000, 30000, 35000, 40000, 45000, 46000, 42000, 37000, 35000, 38000, 40000"></div>
	    <div class="axis" name="x" majorTickStep="1" natural="true"
			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月'}]"></div>
		<div class="axis" name="y" vertical="true" fixUpper="major" includeZero="true"></div>
	</div>
</body>
</html>

ロードしたら<div>の部分が勝手にグラフになってしまいます。

まあ確かにJavaScriptはほとんど書いてないんですが、結局属性値に連想配列とか突っ込んでるだけなのであんまり変わらない気が。
あとテーマの変え方など細かな利用法はわかりませんでした。
またLegendの追加には結局JavaScriptを利用しなければならないらしいあたり中途半端な感じです。
<div class="legend" name="myLegend" horizontal="true" swatchSize=15></div>
とかできればよかったのに。

これもdojo.charting.widget.Chartを使えって言われるのですが、やっぱりdojo.charting.widget.Chartは見あたりません。
dojox.charting.widget.Chartはあるのですが入れ替えただけでは動きませんでした。
詳細不明。

しかしせっかくサーバサイドスクリプトを使わなくていいというのに、どうしてDojo道場は動作サンプルが画像なんでしょうね？

2011/06/10 23:12 | Comments(0) | TrackBack() | JavaScript