忍者ブログ
[PR]
×

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



2017/10/19 01:33 |
Dojo1.6.1 dojo Dojo道場04 dojox.charting.Chart2Dにイベント設定
前回の続き。
今度は描画したグラフにイベントを設定します。
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>
 

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

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

PR


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

トラックバック

トラックバックURL:
前回の続き。 dojoによるグラフはこれまで配列を直接突っ込んでいましたが、dojo.dataオブジェクトを使用することができます。 dojox/data/配下には大量のデータAPIがあり、JSONやXMLやCSVやHTMLテーブルなどからデータを読み取ると全てdojo.dataオブジェクトとなり以後は統一的に扱えますよ、ということになるみたいです。 とりあえずサンプルで動作確認。 <html> <head> <meta http-equiv=...
弱小PHPerの憂鬱 | 2011/06/18 00:32

コメント

コメントを投稿する






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



<<Dojo1.6.1 dojo Dojo道場05 dojox.charting.Chart2DでデータAPIを利用 | HOME | 買ったものリスト 2011/06/12>>
忍者ブログ[PR]