忍者ブログ
[PR]
×

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



2017/12/14 19:22 |
Dojo1.6.1 dojo Dojo道場08 dojox.charting.Chart2Dでズーム
前回の続き。

これまで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はラジオボタンがセットされたときだけではなく消されたときにも呼ばれるため、消されたときは実行されないようにしています。

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


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

トラックバック

トラックバックURL:
前回の続き。 記事では紹介だけに留められている悲しいメソッドたちを簡単に使ってみます。 http://codezine.jp/article/detail/5572?p=3 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/cs...
弱小PHPerの憂鬱 | 2011/07/04 22:25

コメント

コメントを投稿する






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



<<今週の実績 2011/07/03 | HOME | XBOX360春のSTG祭り>>
忍者ブログ[PR]