實時Javascript線圖

Question

我的應用程序中有一個小功能，它需要向網頁呈現一些實時數據。我一直在嘗試研究一些Javascript示例，例如Flot示例「實時更新」，Highcharts示例「樣條更新每秒」。我認爲他們都可以實現它。但我剛開始學習JavaScript。現在陷入困境，完全不知道如何完成我的功能。如果我能得到您的幫助，我將非常感激。我從我的零用錢中獲得一筆小額預算來支持我的利益。我很高興爲此代碼支付學費。

基本上我可以在一個頁面上顯示100個數值變量，如3301,4300,3802 ...。他們每半秒鐘刷新一次。現在我需要創建一個折線圖，將這些數字顯示爲一系列由線段連接的點。網頁的全部功能 可通過時間順序在動態圖表中實時顯示實時數據（約800點）。換句話說，該折線圖可以顯示預定義期間的歷史數據以及最新數據。

我從一個名爲T1.js的JavaScript文件中獲得了100個變量。代碼的一些部分如下：

function get_data_loop() 
{ 
... 
setTimeout("get_data_loop()",500); 
} 

... 

function process_data(data) 
{ 
var parsed = data.split("\n"); 
var a1 = parseInt(parsed[0],10); 
var a2 = parseInt(parsed[1],10); 
var a3 = parseInt(parsed[2],10); 
var a4 = parseInt(parsed[3],10); 
var a5 = parseInt(parsed[4],10); 
... 
var a97 = (parseInt(parsed[96],10)); 
var a98 = (parseInt(parsed[97],10)); 
var a99 = (parseInt(parsed[98],10)); 
var a100 = (parseInt(parsed[99],10)); 

document.getElementById("display_a1").value = a1; 
document.getElementById("display_a2").value = a2; 
document.getElementById("display_a3").value = a3; 
... 
document.getElementById("display_a98").value = a98; 
document.getElementById("display_a99").value = a99; 
document.getElementById("display_a100").value = a100; 
} 

然後我只是知道如何在index.html上顯示這些數字。代碼是：

<td><input type="text" id="display_a1" value="0" onFocus="blur(this);"/></td> 
<td><input type="text" id="display_a1" value="0" onFocus="blur(this);"/></td> 
<td><input type="text" id="display_a3" value="0" onFocus="blur(this);"/></td> 
<td><input type="text" id="display_a4" value="0" onFocus="blur(this);"/></td> 
<td><input type="text" id="display_a5" value="0" onFocus="blur(this);"/></td> 
... 

這就是我所做的一切。在我的腦海裏完全混亂。不知道如何在折線圖中顯示這些數字。

是否可以告訴我如何使用任何製圖組件來製作它？

Answer 1

我建議使用D3 javascript library，因爲現有的組件用於製作大量圖形，包括線圖。這是Tulp Interactive的tutorial，它可以幫助你。