1
我試圖根據單選按鈕組中的選擇來切換「x」和「y」之間的縮放模式。選擇「y」模式不會改變變焦的方向。Flot縮放模式沒有以編程方式更新
任何人都可以找到什麼是錯在下面的小提琴?如果我要手動將模式更改爲「y」,將xaxis.zoomRange設置爲false,將yaxis.zoomRange設置爲null,則只能沿着y軸縮放,但以編程方式重複執行相同的步驟不會產生相同的效果。
http://jsfiddle.net/apandit/que5w852/
HTML:
<div id='plot' style='width:1000px;height:375px;'></div>
<input type='radio' name='zoomDir' value='x' onclick='setZoomDirection(this)' checked>Zoom in X Direction
<input type='radio' name='zoomDir' value='y' onclick='setZoomDirection(this)'>Zoom in Y Direction
JS:
var datasets = [[
[0,0],[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9]
],
[
[0,0],[-1,-1],[-2,-2],[-3,-3],[-4,-4],[-5,-5],[-6,-6],[-7,-7],[-8,-8],[-9,-9]
]];
var plot = $.plot("#plot",datasets,{
pan: {
interactive: true
},
zoom: {
interactive: true,
mode: "x"
},
xaxis: {
zoomRange: null
},
yaxis: {
zoomRange: false
}
});
function setZoomDirection(radioBtn) {
var options = plot.getOptions();
var data = plot.getData();
options.zoom.mode = radioBtn.value;
if(radioBtn.value == 'y') {
options.xaxis.zoomRange = false;
options.yaxis.zoomRange = null;
}
else {
options.yaxis.zoomRange = false;
options.xaxis.zoomRange = null;
}
plot = $.plot("#plot",data,options);
};
謝謝Raidri!第二個問題是我的代碼中的問題,但這兩個問題都出現在我的原始版本的jsfiddle中。我在我的代碼中將setZoomDirection定義爲「window.setZoomDirection = function(radioBtn){...}」......不知道爲什麼我在創建小提琴時沒有轉移過來。 – apandit
沒有想過在jsfiddle中調試。對於那些閱讀這些不知道如何調試jsfiddle的人,請查看http://stackoverflow.com/questions/19460046/how-to-debug-the-js-in-jsfiddle/29491545#29491545 – apandit