Flot圖不隨時間和計數

嗨我需要創建一個flot圖。爲此我使用這個插件http://people.iola.dk/olau/flot/API.txt。Flot圖不隨時間和計數

我需要在x軸上顯示時間（h：m）並在y軸上計數。爲此我編寫了這種腳本。但它不工作。任何機構都可以幫助我。

var running = false; var array; var xscale = 10;

//this function does the plotting 
function draw() { 
    var timearr = getTimeArray(); 
    this.array=timearr; 
    var sTime =""; 
    var oDate = new Date(); 
    var sTimestamp =""; 
    var exparr = ""; 
    for (var l = 0; l < 10; l++) { 
     sTime = this.array[l][1]; 
     oDate.setUTCHours(
      parseInt(sTime.substr(0, 2), 10), 
      parseInt(sTime.substr(3, 2), 10), 
      0, 
      0 
     ); 
     sTimestamp = oDate.getTime(); 
     this.array[l]=[parseInt(l),parseInt(sTimestamp)]; 
    } 
    $.plot(
     $("#graphdiv"),[ 
      { 
       label: "Logged In", 
       data: this.array, 
       lines: { show: true, fill: true, fillColor: "rgba(249, 28, 61,0.3)",lineWidth: 2.5 }, 
       //color:"rgba(249, 28, 61, 1)" 
       color:0 
      }   
     ], 
     { 
     xaxis: { 
      ticks: getTimeArray(1), 
      mode: "time", 
      timeformat: "%H:%M" 

     }, 
     yaxis: { 
      ticks: [0 , 1, 2, 3,4,5, 6,7,8,9,10], 
      min: 0, 
      tickDecimals: 0 
     },    
     grid: { 
      show: true, 
      color: '#474747', 
      tickColor: '#474747', 
      borderWidth: 2, 
      autoHighlight: true, 
      mouseActiveRadius: 2 
     } 
    }); 
} 

function getTimeArray(flg) 
{ 
    array = []; 
    var d = new Date(); 
    var hour=''; 
    var minute=''; 
    var timeString =''; 

    for (var i = 9; i >= 0; i--){ 
     if(i<9)d = new Date(d.getTime() - 5*60*1000); 
     hour = d.getHours(); 
     minute = d.getMinutes(); 
     if (hour > 12) { hour = hour - 12;  } 
     if (hour == 0) { hour = 12;    } 
     if (hour < 10) { hour = "0" + hour; } 
     if (minute < 10) { minute = "0" + minute; } 
     timeString = hour + ':' + minute; 
     if(timeString!=undefined){ 
      array[i]=[i,timeString]; 
     } 
    } 
    return array; 
} 


function initialize() { 
    this.array = new Array(); 
    for (var i = 0; i < xscale; i++) { 
     this.array[i] = [i, 0.0]; 
    } 
} 

function refreshStat() { 
    if (!running) { 
     running = true; 
     draw(); 
     running = false; 
    } 
} 

$(document).ready(function() { 
    initialize(); 
    refreshStat(); 
    setInterval("refreshStat()", 10); 
});

來源

2012-02-22 learner

您與x軸模式「時」誤怎麼海軍報的交易。它想要的是x值，它們是表示javascript時間戳的整數。然後它將格式化爲%H:%M。

所以你已經有一些令人費解的代碼來創建%H:%M中的值，然後將它們轉換爲時間戳並將它們傳遞給時間戳，但是還要指定顯示哪些時間戳。相反，你可以生成你想要的時間戳，把它們放到你的數據數組是這樣的：

[[1329930943084,0], 
[1329931043084,1], 
... 
[<timestamp> ,10]]

就是這樣，只給到這一點海軍報，無需定義的X或Y軸的刻度。

此外，你的setInterval會拋出一個錯誤，這可能是你爲什麼沒有到達任何地方。你可以有更多的像這樣：

setInterval(refreshStat, 10);

這裏是你的代碼的超級簡化版本：http://jsfiddle.net/ryleyb/MaJgn/

來源

2012-02-22 17:26:59 Ryley

我怎能捨棄動態數據值來繪製。我需要一次顯示多個圖表。例如。兩個網站登錄的用戶數量在每個時間段。我會從MySQL表中計數。但我怎麼將這個數據數組分配到$ .plot – learner 2012-02-23 04:00:32

檢查了這個一般想法：http://stackoverflow.com/a/3792763/312208該示例通過ajax返回所有系列數據，你可能會希望每個請求只返回比上次請求更新的數據，並將組合數據存儲在客戶端。 – Ryley 2012-02-23 05:26:34

Flot圖不隨時間和計數

回答

相關問題