2012-05-24 55 views
4

我已經實現了一些使用jQuery flot的縮放功能,但它不能正常工作。縮放是通過捕獲flot的「plotselected」事件並使用「ranges」參數重新繪製來修改xaxis和yaxis的最大值和最小值來實現的。jQuery flot - 縮放導致圖縮小,軸標籤消失

當最初繪製圖時,繪圖顯示正確,我可以拖動以進行x-y選擇。當繪圖重繪時,屏幕上軸網格的實際大小會縮小,但繪製的是適當的數據範圍。另外,每當我縮放重新繪製時,軸標籤都從視圖中消失,但我仍然可以在檢查器中看到它們,並且在圖的最左上角有一些殘留物,看起來像軸標籤可能已經移動了那裏和部分(幾乎)不可見。我有一些其他代碼可以用不同的數據繪製圖形,這些數據也會從視圖中移除軸標籤,雖然繪圖的大小不會縮小(如縮放時那樣),並再次繪製適當的數據。我提到,也許這兩個問題有共同的起源。

我想也許我可以通過某種方式破壞陰謀或重畫之前清空畫布照顧這些問題,但我還沒有找到如何做到這一點的任何指導。

以下是一些相關的代碼片段。首先列出了最初呈現在情節和結合了「plotselected」事件的代碼:

  o.midGraph = $.plot($("#small-graph-mid"), testData, graphOptions); 
       $("#small-graph-mid").unbind("plotselected"); 
       $("#small-graph-mid").bind("plotselected", function (event, ranges) { 
        graphOptions = o.midGraph.getOptions(); 
        testData = o.midGraph.getData(); 
        o.midGraph = $.plot($("#small-graph-mid"), testData, 
          self._graphZoomOptions(graphOptions, ranges)); 
       }); 

這裏是設定軸邊界到新範圍的功能:

_graphZoomOptions: function(options, ranges) { 
     return $.extend(true, {}, options, { 
      xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }, 
      yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to } 
     }); 
    }, 

上午我在正確的軌道上認爲我需要以某種方式摧毀/清除/重置劇情/畫布?

+0

你使用任何插件?在開發過程中儘可能多地禁用它們。看看你的初始化代碼,它看起來並不像你在使用FLOT zip文件中包含的PLUGINS.txt文件中概括的一般插件樣式。爲什麼不使用已包含的導航插件來實現縮放和平移:http://people.iola.dk/olau/flot/examples/navigate.html – Alex

回答

5

你使用的是jQuery 1.7.2嗎?

如果是這樣,看看this thread,特別是在評論#4中包含的固定導航插件。

它解決了我的導航插件幾個小時後的問題。

+1

這就是互聯網真棒的原因。有這個確切的問題, - 其他人已經固定它,並張貼免費的, - 別人已要求對堆棧溢出確切的問題, - 有人張貼解答鏈接到確切的解決方案!全勝 – Claudiu

1

這是我如何設置我的Y軸到一定的範圍。之後,所有的Y軸將被設置爲相同的範圍。 「每個」循環中的4個語句中的2個可能是不必要的,我只是不記得哪些語句。

$.each(yaxes, function(_, _yaxis){ 
    _yaxis.min = _min; 
    _yaxis.max = _max; 
    _yaxis.options.min=_min; 
    _yaxis.options.max=_max; 
}); 

setupGrid(); 
draw(); 

您應該不需要銷燬圖表並重繪它。 setupGrid和繪圖函數爲您處理該部分。

1

我得到了這個問題,通過不使用plot.getOptions()來解決它。沒有看到這個原因,但使用我創建的原始選項對象,當啓動情節工作。