Dojo1.6.1 dojo Dojo道場04 dojox.charting.Chart2Dにイベント設定

[PR]

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

2024/11/23 16:15 |

前回の続き。
今度は描画したグラフにイベントを設定します。
http://codezine.jp/article/detail/5572
マウスオーバーやクリックで別ページに移動などが行えるようです。

と思ったら使用法も出さずにすぐdojo.dataが出てきやがりました。
元々これがわからんかったからDojo道場始めたんだよなあ。

で、解説記事だとイベントとデータAPIが不可分なかんじに書かれているのですが、よく読んでみたら別に一緒に使わなければならないというわけではないようです。
ていうかconnectToPlot()の使い方が一切書いてないじゃない。
とりあえずdojo.dataはパスしてイベントだけ設定してみます。

まずはただの円グラフ。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<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(){
			//折れ線グラフ
			var myChart = new dojox.charting.Chart2D("myChart");
			myChart.addPlot("default", {type: "Pie", startAngle:270});
			
			//グラフに値を追加
			var persentage1034 = [77.4, 7.7, 5.8, 4.0, 2.9, 1.9, 0.3];
			myChart.addSeries("ハード別ソフト販売割合", persentage1034);
			
			//テーマ
			myChart.setTheme(dojox.charting.themes.PurpleRain);
			
			//描画
			myChart.render();
		}
		//起動時実行
		dojo.addOnLoad(drawChart);
	</script>
</head>
<body>
	<div id="myChart" style="width: 300px; height: 300px;"></div>
</body>
</html>

さて、ではいよいよイベントを設定していきますが、実はよく使いそうな内容は予め登録されていたりします。
なのでそれを呼ぶだけです。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<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");
		dojo.require("dojox.charting.action2d.MoveSlice");
		dojo.require("dojox.charting.action2d.Tooltip");
		dojo.require("dojox.charting.action2d.Highlight");
		
		var drawChart = function(){
			//折れ線グラフ
			var myChart = new dojox.charting.Chart2D("myChart");
			myChart.addPlot("default", {type: "Pie", startAngle:270});
			
			//グラフに値を追加
			var persentage1034 = [77.4, 7.7, 5.8, 4.0, 2.9, 1.9, 0.3];
			myChart.addSeries("ハード別ソフト販売割合", persentage1034);
			
			//テーマ
			myChart.setTheme(dojox.charting.themes.PurpleRain);
			
			//定義済イベント
			dojox.charting.action2d.MoveSlice(myChart, "default");
			dojox.charting.action2d.Tooltip(myChart, "default");
			dojox.charting.action2d.Highlight(myChart, "default");
			
			//任意のイベントハンドラを登録
			myChart.connectToPlot("default", function(evt){console.log(evt.type);});
			
			//描画
			myChart.render();
		}
		//起動時実行
		dojo.addOnLoad(drawChart);
	</script>
</head>
<body>
	<div id="myChart" style="width: 300px; height: 300px;"></div>
</body>
</html>

この定義済イベント呼び出しの書き方、日本語記事が全く存在しないんだけどどういうことなの。
> また、次のような定義済みのアクションを指定することで、マウスオーバー時の効果を簡単に実装することもできます。
だけじゃ使い方まったくわかんねーよ。

ちなみにグラフの元はこれです。

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