Question

我的应用程序中有一个小功能，需要向网页提供一些实时数据。我一直在尝试研究一些Javascript示例，例如Flot示例“实时更新”，Highcharts示例“样条更新每秒”。我认为他们都可以实现它。但我刚开始学习JavaScript。现在卡住了，完全不知道如何完成我的功能。如果我能得到你的帮助，我将非常感激。我的零用钱预算很少，以支持我的利益。我很乐意为这段代码支付学费。

基本上我可以在一个页面上显示100个数值变量，如3301,4390,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，可以帮助你。

实时Javascript折线图

1 个答案: