將實時數據繪製到折線圖中

我有一些實時收集的數據，我想繪製成折線圖。將實時數據繪製到折線圖中

我想將上次60次調用中收到的數據繪製成折線圖（暫停繪製時不拉數據），每個名稱：值對獲得1個圖表（因此在這種情況下會有6個圖表）。當然，我需要每秒鐘更新圖表或每次調用httpGet()。

我不知道在從服務器獲得響應（數據繪圖）後，如何繼續下一步......我所尋找的結果幾乎是「CPU使用歷史」風格。

下面是來自聚集服務器收集數據我的JavaScript文件：

//httpGet() adopted from SO/247483 
function httpGet() 
{ 
    var xmlHttp = new XMLHttpRequest(); 
    xmlHttp.open("GET", "foo.com/sensordata", false); 
    xmlHttp.send(null); 
    console.log(xmlHttp.responseText); 
    return xmlHttp.responseText; 
} 

var interval; 

//this is called by a button in the html file 
function start(btn) 
{ 
    if(btn.value=="Start"){ 
     interval = setInterval(httpGet, 1000); 
     btn.value="Stop"; 
    } else { 
     btn.value="Start"; 
     clearInterval(interval); 
    } 
}

所以點擊「開始」按鈕，將開始爲數據GET請求，每1秒。服務器以JSON格式返回數據，這是控制檯的一個輸出示例：

{ 
    "Time":"2015/06/04 18:35:39", 
    "SensorA":{"Value1":0.34804,"Value2":-0.39175,"Value3":-0.61718}, 
    "SensorB":{"Value1":516,"Value2":1,"Value2":2103} 
}

謝謝！

來源

2015-06-04 anetworknoobie

哪些值你在圖表中想要什麼？請指定x和y軸映射 –

我製作了this demo（一定要點擊Start Feed按鈕！），它使用了ZingChart。在獲取請求的回調函數中，我遍歷數據並將其轉換爲ZingChart的正確格式，然後在清理完所有數據後，我使用modify方法在scale-x中設置values屬性，該屬性接受一個Unix時間值數組以毫秒爲單位，並使用setseriesvalues方法更新圖表中的數據。

for(var i = 0; i < 6; i++){ 
    zingchart.exec('myChart','modify',{ 
     update:false, 
     data:{ 
      "scale-x":{ 
       "values":dataObj.date 
      } 
     } 
    }); 
    zingchart.exec('myChart','setseriesvalues',{ 
     update:false, 
     graphid:i, 
     values:[dataObj[Object.keys(dataObj)[(i + 1)]]] 
    }); 
} 
zingchart.exec('myChart','update');

由於我打電話修改和setseriesvalues一堆倍成一排，我設置上都update選項false，其中排隊的改變，已排隊被推到圖表的一切當調用update時。

（是的，我在這裏做的假數據 - 我兩個不同的JSON文件之間交替，但你應該明白我的意思。）

來源

2015-06-09 16:09:13 Stalfos

將實時數據繪製到折線圖中

回答

相關問題