前回の続き。
記事では紹介だけに留められている悲しいメソッドたちを簡単に使ってみます。
http://codezine.jp/article/detail/5572?p=3
記事では紹介だけに留められている悲しいメソッドたちを簡単に使ってみます。
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
トラックバック
トラックバックURL:
