Dojo1.6.1 dojo Dojo道場08 dojox.charting.Chart2Dでズーム

[PR]

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

2024/04/23 15:26 |

前回の続き。

これまでdojoで作ってきたグラフは単に表示するだけでした。
いよいよグラフに対し動的な変化を与えてやりましょう。

dojox.charting.Chart2D.setAxisWindowメソッドでスケールの変更を行うことができます。
あとはその値を設定するインターフェイスを追加するだけです。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="../dojo/dojo.js" djConfig="parseOnLoad: true"></script>
	<script type="text/javascript">
		dojo.require("dojox.charting.DataSeries");
		dojo.require("dojo.data.ItemFileWriteStore");
		dojo.require("dojox.charting.Chart2D");
		dojo.require("dijit.form.Form");
		dojo.require("dijit.form.RadioButton");
		
		//グローバルにする
		var myChart;
		
		var drawChart = function(){
			//ダミーのストア
				var store = new dojo.data.ItemFileWriteStore({data:{items:[{value: 0}]}});
			
			//折れ線グラフ
				myChart = new dojox.charting.Chart2D("myChart");
				myChart.addPlot("default", {type: "Lines"});
				myChart.addAxis("x", {majorTickStep: 1, natural: true});
				myChart.addAxis("y", {vertical: true});
				myChart.addPlot("grid", {type: "Grid"});
				myChart.addSeries("stockprice", new dojox.charting.DataSeries(store));
				myChart.render();

			//適当に値を設定
				var i=1;
				while(i<12){
					var val = Math.floor(Math.random() * 1000);
					store.newItem({value: val});
					i++;
				}
			
		}
		
		//クリックで拡大率変更
			var changeView = function(span){
				//オンであれば
				if(dijit.byId(span + "months").get("checked") == true){
					// 拡大率の計算
					var sx = (12 - 1) / (span - 1);
					// グラフの表示期間変更
					myChart.setAxisWindow("x", sx, 12 - span);
					myChart.render();
				}
			}
		
		//起動時実行
		dojo.addOnLoad(drawChart);
		
	</script>
</head>
<body class="claro">
	<form dojoType="dijit.form.Form"> 
	  <input type="radio" dojoType="dijit.form.RadioButton" onChange="changeView(3)" name="span" id="3months"/> 
	  <label for="3months">3ヶ月</label> 
	  <input type="radio" dojoType="dijit.form.RadioButton" onChange="changeView(6)" name="span" id="6months"/> 
	  <label for="6months">6ヶ月</label> 
	  <input type="radio" dojoType="dijit.form.RadioButton" onChange="changeView(12)" name="span" id="12months" checked/> 
	  <label for="12months">1年</label> 
	</form> 

	<div id="myChart" style="width: 400px; height: 200px;"></div>
</body>
</html>

記事ではグラフの値を直接指定していますが、特に本題でもないのでランダムにしています。
見てのとおりラジオボタンをクリックするだけでスケールの変更が可能となります。

if(dijit.byId(span + "months").get("checked") == true)
のあたりは何をやっているかというと、onChangeはラジオボタンがセットされたときだけではなく消されたときにも呼ばれるため、消されたときは実行されないようにしています。

ところで記事のタイトルには「ズームとスクロール」ってあるんですけどスクロールって何？

2011/07/01 21:57 | Comments(0) | TrackBack() | JavaScript