如何爲創建的多個Flot圖表放大x軸

Question

我想要使用下面的代碼創建的圖表圖表使用縮放工作。

var options = { 
       yaxis: { min: 0 }, 
       xaxis: { mode: "time" }, 
       series:{ 
         lines: { show: true }, 
         points: { show: true } 
         }, 
       grid: { 
         hoverable: true, 
         clickable: false, 
         mouseActiveRadius: 30, 
         backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] } 
         }, 
       selection:{mode: "x"} 
       }; 
var pdata = []; 
for (var key in datasets) { 
     pdata = []; 
     pdata.push(datasets[key]); 
     $.plot($('<div style="width:1200px;height:600px;"></div>').appendTo('#placeholder'),pdata,options); 
     $('<h5 align="center">'+datasets[key]['label']+'</h5>').appendTo('#placeholder'); 
     $('<br>').appendTo('#placeholder'); 
     $("#placeholder").UseTooltip(); 
    }; 

在這裏，我創建了一個循環中的多個圖表。 如何添加縮放功能。

謝謝。

Answer 1

flot通常期望它的佔位符div有一個獨特的id。然後，您將使用此唯一的id將特定的plotselected事件分配給該圖。但是，您將代碼結構化的方式，是在創建繪圖時將真正的佔位符div附加到父div。我喜歡你的方法，所以我們需要解決flot的限制。

所以，在你的plot調用給你的真正的佔位符div類名稱。這會給我們一些東西來綁定plotselected事件。您還需要保存對您創建的所有繪圖對象的引用。我只是使用全局數組。

myPlots.push(
    $.plot($('<div class="myPlot" style="width:300px;height:100px;"></div>').appendTo('#placeholder'),pdata,options) 
); 

哪裏myPlots是全球陣列和我的課是myPlot。

在此之後，你可以建立在jQuery選擇.myPlots的plotselected處理程序。接下來是棘手的部分，您需要在處理程序中找到您的繪圖對象引用。要做到這一點最簡單的方法，我發現，是要循環myPlots陣列和他們比較的div到div事件發生在：

$(".myPlot").bind("plotselected", function (event, ranges) { 
    for (var i = 0; i < myPlots.length; i++) 
    { 
     var aPlot = myPlots[i]; 
     if (aPlot.getPlaceholder()[0] == event.currentTarget) //this is the correct plot 
     { 
      var opts = myPlots[i].getOptions(); 
      opts.xaxes[0].min = ranges.xaxis.from; 
      opts.xaxes[0].max = ranges.xaxis.to; 
      myPlots[i].setupGrid(); 
      myPlots[i].draw(); 
     }   
    }  
}); 

你會看到上面我重繪的情節不同於一點點在flot examples。我更喜歡這種方法，因爲您不必記住數據，您可以調整最小/最大值選項並重繪。

這是fiddle把這一切放在一起。

Answer 2

馬克回答的後續事項：唯一ID並非真正的Flot限制;這是HTML規範的要求。瀏覽器通常會讓你擺脫這個規則，但它仍然不是一個好主意。 Mark的回答很好，但是這裏不需要在每個事件中都進行數組搜索：

$.each(datasets, function(key, dataset) { 
    var element = $('<div style="width:1200px;height:600px;"></div>') 
     .appendTo('#placeholder'); 
    var plot = $.plot(element, [dataset], options); 
    var plotOptions = plot.getOptions(); 
    element.bind('plotselected', function(event, ranges) { 
     plotOptions.xaxes[0].min = ranges.xaxis.from; 
     plotOptions.xaxes[0].max = ranges.xaxis.to; 
     plot.setupGrid(); 
     plot.draw(); 
    }); 
};