忍者ブログ
[PR]
×

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



2017/06/24 04:07 |
Dojo1.6.1 dojo Dojo道場09 dojox.charting.Chart2Dのその他のメソッド
前回の続き。

記事では紹介だけに留められている悲しいメソッドたちを簡単に使ってみます。
http://codezine.jp/article/detail/5572?p=3
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<style type="text/css"> 
		@import "dojo/resources/dojo.css";
		@import "dijit/themes/claro/claro.css";
	</style>
	
	<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("dijit.form.Form");
		dojo.require("dijit.form.RadioButton");
		dojo.require("dojox.charting.themes.Charged"); 
		
		//グローバルにする
		var myChart;
		
		//ランダムな値の配列を作成
		function getRandArray(count){
		    if (count == undefined) { var count = 12; }
			var retArr = new Array();
			var i=0;
			while(i<count){
				retArr.push(Math.floor(Math.random() * 1000));
				i++;
			}
			return retArr;
		}
		
		var drawChart = function(){
		
			//折れ線グラフ
				myChart = new dojox.charting.Chart2D("myChart");
				myChart.addPlot("plot1", {type: "Lines"});
				myChart.addPlot("plot2", {type: "ClusteredColumns", vAxis: "right"});
				myChart.addAxis("x", {majorTickStep: 1, natural: true});
				myChart.addAxis("y", {vertical: true});
				myChart.addAxis("right", {vertical: true, leftBottom: false, fixUpper: "major", includeZero: true}); 
				myChart.addPlot("grid", {type: "Grid"});
				myChart.addSeries("series1", getRandArray(), {plot: "plot1"});
				myChart.addSeries("series2", getRandArray(), {plot: "plot1"});
				myChart.addSeries("series3", getRandArray(), {plot: "plot2"});
				myChart.setTheme(dojox.charting.themes.Charged);
				myChart.render();
				
		}
		
		//拡大縮小
			var resizeChart2DToggle = 0;
			var resizeChart2D = function(){
				resizeChart2DToggle = 1 - resizeChart2DToggle;
				
				if(resizeChart2DToggle == 1){
					myChart.resize(500, 300);
				}else{
					myChart.resize(400, 200);
				}
			}
		
		//値の更新
			var updateSeries = function(series, span){
				myChart.updateSeries("series1", getRandArray(span));
				myChart.updateSeries("series2", getRandArray(span));
				myChart.updateSeries("series3", getRandArray(span));
				myChart.render();
			}
		
		//Plotの順番入れ替え
			var movePlotToFrontToggle = 0;
			var movePlotToFront = function(){
				movePlotToFrontToggle = 1 - movePlotToFrontToggle;
				myChart.movePlotToFront("plot"+(movePlotToFrontToggle+1));
				myChart.render();
			}
		
		//Seriesの順番入れ替え
			var moveSeriesToFrontToggle = 0;
			var moveSeriesToFront = function(){
				moveSeriesToFrontToggle = 1 - moveSeriesToFrontToggle;
				myChart.moveSeriesToFront("series"+(moveSeriesToFrontToggle+1));
				myChart.render();
			}
		
		//削除
			var removeSeriesToggle = 0;
			var removeSeries = function(){
				removeSeriesToggle = 1 - removeSeriesToggle;
				
				if(removeSeriesToggle == 1){
					myChart.removeSeries("series1");
					myChart.removeSeries("series2");
					myChart.removeSeries("series3");
				}else{
					myChart.addSeries("series1", getRandArray(), {plot: "plot1"});
					myChart.addSeries("series2", getRandArray(), {plot: "plot1"});
					myChart.addSeries("series3", getRandArray(), {plot: "plot2"});
					myChart.render();
				}
			}
		
		//起動時実行
		dojo.addOnLoad(drawChart);
		
	</script>
</head>
<body class="claro">
	<form dojoType="dijit.form.Form">
	  <input type="radio" dojoType="dijit.form.RadioButton" onClick="resizeChart2D()" name="span" id="formButtonResizeChart2D" /> 
	  <label for="formButtonResizeChart2D">拡大/縮小</label>
	  <input type="radio" dojoType="dijit.form.RadioButton" onClick="updateSeries('series1', 12)" name="span" id="formButtonUpdateSeries"/> 
	  <label for="formButtonUpdateSeries">値の更新</label>
	  <input type="radio" dojoType="dijit.form.RadioButton" onClick="moveSeriesToFront()" name="span" id="formButtonMoveSeriesToFront"/> 
	  <label for="formButtonMoveSeriesToFront">Seriesの順番入れ替え</label>
	  <input type="radio" dojoType="dijit.form.RadioButton" onClick="movePlotToFront()" name="span" id="formButtonMovePlotToFront" /> 
	  <label for="formButtonMovePlotToFront">Plotの順番入れ替え</label>
	  <input type="radio" dojoType="dijit.form.RadioButton" onClick="removeSeries()" name="span" id="formButtonRemoveSeries" /> 
	  <label for="formButtonRemoveSeries">Series削除/戻す</label>
	</form>

	<div id="myChart" style="width: 400px; height: 200px;"></div>
	
</body>
</html>
 
拡大縮小、グラフの順番入れ替えなどが簡単に行えました。
ただ順番については、順番を変えたかっただけなのに連動して色も勝手に変わってしまいました。
PR


2011/07/04 22:24 | Comments(0) | TrackBack(0) | JavaScript

トラックバック

トラックバックURL:

コメント

コメントを投稿する






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



<<PHP5.3 WindowsにMongoDBをインストール | HOME | 買ったものリスト 2011/07/03>>
忍者ブログ[PR]