如何使用 PHP、cURL、ajax 流式传输实时数据并将其呈现在折线图中

Posted 2023-02-22

【中文标题】如何使用 PHP、cURL、ajax 流式传输实时数据并将其呈现在折线图中

【英文标题】：How can I stream live data and present it in a line chart using PHP, cURL, ajax

【发布时间】：2013-10-06 07:23:46

【问题描述】：

有一个硬件可以记录数据。我可以调用 API 来通过 cURL 获取数据流。它每秒钟记录一行新数据。我想流式传输这些数据并随着时间的推移将其呈现在折线图中。使用 php，也许还有 AJAX。我想在浏览器中看到一个动态图表，每秒钟刷新一次浏览器或使用 Ajax。我需要什么样的工具？这样做的最佳方法是什么？

谢谢大家，这些都是非常有用的东西。 目前我正在努力从硬件中获取数据。 我可以通过这样编写的接口访问数据：

192.168.150.130:2345/realtime

然后我可以在浏览器中看到这个：

DM_NumLogChans=5
DM_NumDataModes=1

DM_LogicalChan=1
DM_ChanType=SEQUENTIAL
DM_NumDims=2
DM_DataMode=1
DM_DataModeType=TIMHIS
DM_AxisLabel.Dim1=Time
DM_AxisLabel.Dim2=Value
DM_AxisUnits.Dim1=secs
DM_AxisUnits.Dim2=microstrain
DM_SampleRate=1.000000
DM_TimeBase=0.0
DM_ChanName=bridge_1
DM_UserMin=-583.220764
DM_UserMax=940.916199


DM_Start=
-439.779    -391.875    -680.114    1001.37 0
-442.068    -396.62 -680.945    1001.37 0
-443.571    -399.705    -680.639    1001.37 0
-445.598    -404.848    -684.662    1001.37 0

这些是我无法从 URL 获取的记录数据。我想保存它或以某种方式直播它。

【问题讨论】：

这个答案可能有助于了解如何实际流式传输数据：***.com/a/6558625

【参考方案1】：

任何各种 JS 图表库都应该能够通过 ajax 调用加载数据来为您呈现折线图。以下是一些：

http://www.fusioncharts.com

http://www.chartjs.org

http://www.jscharts.com

http://www.amcharts.com

...还有更多。只需找到最适合您的。

要运行每 x 秒刷新一次图表的 ajax 调用，请使用以下代码：

Call jQuery Ajax Request Each X Minutes

另外，看看 amCharts 论坛上的这个答案： http://www.amcharts.com/forum/viewtopic.php?id=12625

【参考方案2】：

我建议你使用谷歌图表的Line plot。见this jsFiddle example of how to add data automatically。这很简单，就像使用data.addRow([ DATA_INDEX, VALUE_1, VALUE_2, ... ]);

这使用 jQuery 进行绘图初始化和“单击”事件。您必须创建一个循环才能检索数据并将其添加到绘图中。