Flot縮放模式沒有以編程方式更新

我試圖根據單選按鈕組中的選擇來切換「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); 
};

來源

2015-04-06 apandit

1）您setZoomDirection函數不叫，因爲它是在其他範圍則在HTML您在線onclick處理程序。我將其更改爲jQuery事件處理程序。

2）內部flot使用options.xaxes[0]而不是options.xaxis。只需更換這些線路，你會得到experted結果：

if (this.value == 'y') { 
    options.xaxes[0].zoomRange = false; 
    options.yaxes[0].zoomRange = null; 
} 
else { 
    options.yaxes[0].zoomRange = false; 
    options.xaxes[0].zoomRange = null; 
}

爲完整的例子見updated fiddle。

來源

2015-04-07 11:24:15 Raidri

謝謝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

Flot縮放模式沒有以編程方式更新

回答

相關問題