JQuery FLOT圖表動態Y軸

Question

我有一個flot圖表，根據最近的100個數據點計算最大Y軸值，然後成功繪製圖... 但有 有時候，正在進行的圖（ 5秒延遲，繪製新數據點）超過當前最大限制。 有沒有辦法在繪製圖表上的新點時動態縮放Y軸？

這是一個關於如何在超過當前Y軸的情況下動態縮放圖表的Y軸的有效問題，因爲隨着時間的推移繪製了圖表，並且每5秒添加一個新點，我問的是如何縮放Y軸如果達到電流最大Y軸值之上適應新的情節數據..

UPDATE：

這裏是我使用（JSON返回的數據）的代碼，以及在繪圖更新計時器： 「highY」從數據庫獲取最後100個數據點，並將最大值設置爲最高計數+ 10％

 <script type="text/javascript"> 
      $(function() { 
       var str1 = [], totalPoints = 300; 
       var str2 = [], totalPoints = 300; 
       var pts1 = ''; 
       var pts2 = ''; 
       if (pts1 == "" || pts == null) { pts = '2012-10-02 17:17:02'; } 
       if (pts2 == "" || pts == null) { pts = '2012-10-02 17:17:02'; } 
       var maxYaxis = <?PHP echo $highY; ?>; 
       function getStr1() { 
        var ts1 = new Date().getTime(); 
        var json1 = (function() { 
         var json1 = null; 
         var myURL = '<?PHP echo $updateURL; ?>?s=1&ts=' + ts1; 
         $.ajax({ 
          'async': false, 
          'global': false, 
          'url': myURL, 
          'dataType': "json", 
          'success': function (data) { 
           json1 = data; 
          } 
         }); 
         return json1; 
        })(); 
        var y1 = json1['data']['avgpersec']; 
        var total_1 = json1['data']['running_total']; 
        document.getElementById('<?PHP echo $string1; ?>Total').innerHTML = total_1; 
        if (str1.length > 0) { str1 = str1.slice(1); } 

        while (str1.length < totalPoints) { 
         var prev = str1.length > 0 ? str1[str1.length - 1] : 50; 
         str1.push(y1); 
        } 

        // zip the generated y values with the x values 
        var res = []; 
        for (var i = 0; i < str1.length; ++i){ res.push([i, str1[i]]) } 
        return res; 
       } 

       function getStr2() { 
        var ts2 = new Date().getTime(); 
        var json2 = (function() { 
         var json2 = null; 
         var myURL = '<?PHP echo $updateURL; ?>?s=2&ts=' + ts2; 
         $.ajax({ 
          'async': false, 
          'global': false, 
          'url': myURL, 
          'dataType': "json", 
          'success': function (data) { 
           json2 = data; 
          } 
         }); 
         return json2; 
        })(); 
        var y2 = json2['data']['avgpersec']; 
        var total_2 = json2['data']['running_total']; 
        document.getElementById('<?PHP echo $string2; ?>Total').innerHTML = total_2; 
        if (str2.length > 0) { str2 = str2.slice(1); } 

        while (str2.length < totalPoints) { 
         var prev = str2.length > 0 ? str2[str2.length - 1] : 50; 
         str2.push(y2); 
        } 

        // zip the generated y values with the x values 
        var res = []; 
        for (var i = 0; i < str2.length; ++i){ res.push([i, str2[i]]) } 
        return res; 
       } 

       // setup control widget 
       var updateInterval = 5000; 
       $("#updateInterval").val(updateInterval).change(function() { 
        var v = $(this).val(); 
        if (v && !isNaN(+v)) { 
         updateInterval = +v; 
        if (updateInterval < 1) 
         updateInterval = 1; 
        if (updateInterval > 2000) 
         updateInterval = 2000; 
         $(this).val("" + updateInterval); 
        } 
       }); 

       // setup plot 
       var options = { 
        series: { shadowSize: 0 }, // drawing is faster without shadows 
        yaxis: { min: 0, max: maxYaxis}, 
        xaxis: { show: false }, 
        colors: ["<?PHP echo $string1Color; ?>","<?PHP echo $string2Color; ?>"] 
       }; 
       var plot = $.plot($("#placeholder"), [ getStr1(), getStr2() ], options); 

       function update() { 
        plot.setData([ getStr1(), getStr2() ]); 
        plot.draw(); 
        setTimeout(update, updateInterval); 
       } 

       update(); 
      }); 
     </script> 

我希望能夠實現的是調整「$ highY」（Y軸）值的實時值，因爲我繪製了新的數據點，因此如果新數據繪圖點的值超過圖表選項中設置的當前「yaxis {max：＃}」。

Answer 1

我假設你現在正在使用flot.setData和flot.draw？

最簡單的解決方案就是每次收到新數據時都要致電$.plot。在不同的時間，這已經被flot插件的作者推薦爲處理這種情況的合理有效的方式。我已經在每秒都刷新的圖表上使用它，並發現它不會在用戶的計算機上使用過多的CPU，即使在一頁上每秒刷新3-4個圖表也是如此。根據您添加的代碼（和你的建議編輯）

編輯，我會改變更新功能如下所示：

function update() { 
    var data = [ getStr1(), getStr2() ]; 

    //modify options to set the y max to the new y max 
    options.yaxis.max = maxYaxis; 
    $.plot($("#placeholder"), data, options); 
    setTimeout(update, updateInterval); 
} 

此外，您將代碼添加到getStr和getStr是守maxYaxis變量是最新的。