忍者ブログ
[PR]
×

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



2017/08/24 04:32 |
Dojo1.6.1 dojo Dojo道場03 グラフウィジェット
前回の続き。

前回までは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道場は動作サンプルが画像なんでしょうね?
PR


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

トラックバック

トラックバックURL:
前回の続き。 今度は描画したグラフにイベントを設定します。 http://codezine.jp/article/detail/5572 マウスオーバーやクリックで別ページに移動などが行えるようです。 と思ったら使用法も出さずにすぐdojo.dataが出てきやがりました。 元々これがわからんかったからDojo道場始めたんだよなあ。 で、解説記事だとイベントとデータAPIが不可分なかんじに書かれているのですが、よく読んでみたら別に一緒に使わなければならないというわけではないようです...
弱小PHPerの憂鬱 | 2011/06/13 22:36

コメント

コメントを投稿する






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



<<今週の実績 2011/06/12 | HOME | PHP Services_Shitarabaを1.0.4にバージョンアップ>>
忍者ブログ[PR]