如何使用在文本文件中获得的数据绘制实时图形（直方图）答案

【问题标题】：How to plot a realtime graph (histogram) using data obtained in a text file如何使用在文本文件中获得的数据绘制实时图形（直方图）
【发布时间】：2010-12-16 06:46:27
【问题描述】：

我有一个由服务器上的程序生成的连续生成的数据（文本文件）。我想像powergrid 那样将数据绘制为实时图表。这是我的方法：

由于数据在服务器上以文本文件的形式不断生成，我编写了一个 PHP 脚本来读取该文件 (get_file_contents)，输出数据点并使用 sparkline jQuery 插件绘制图形。但问题是它一次读取文件。此外，文本文件还在不断增长。谁能建议我更好的方法？

【问题讨论】：

标签： php jquery graph histogram real-time

【解决方案1】：

当您谈论使用 Javascript 绘图解决方案时，请执行以下操作：

在页面加载时，您可以通过阅读完整的文本文件并记住它的大小来创建当前图表。
页面加载后，您创建一个 Javascript 函数，该函数使用 AJAX 技术 (XMLHttpRequest) 定期轮询服务器上的特定脚本，并将文本文件的最后已知文件大小作为参数传递。
您的轮询脚本采用文件大小参数，打开文本文件，跳过文件，直到到达您上次读取文件的位置（文件大小参数）。
轮询脚本将所有可用数据从filesize返回到文件末尾和新文件站点
您的 Javascript 读取 AJAX 响应并将所需的绘图点添加到您的图表中
然后您可以使用新的文件大小作为参数重新轮询服务器端脚本

此过程涉及服务器端和客户端编程，但可以轻松完成。

以下是一个示例轮询脚本，它需要一个 index 参数，该参数告诉脚本从哪个位置读取文本文件并返回一个 JSON 编码的绘图点列表和新的索引指针。

// poll.php
$index = (isset($_GET['index'])) ? (int)$_GET['index'] : 0;
$file = fopen('path/to/your/file.txt', 'r');
$data = array(
    'index' => null,
    'data'  => array()
);
// move forward to the designated position
fseek($file, $index, SEEK_SET);
while (!feof($file)) {
    /*
     * assuming we have a file that looks like
     * 0,10
     * 1,15
     * 2,12
     * ...
     */
    list($x, $y) = explode(',', trim(fgets($handle)), 2);
    $data['data'][] = array('x' => $x, 'y' => $y);
}
// set the new index
$data['index'] = ftell($file);
fclose($file);

header('Content-Type: application/json');
echo json_encode($data);
exit();

对应的 Javascript/jQuery sn-p 可以是：

// the jQuery code to poll the script
var current = 0;
function pollData() {
    $.getJSON('poll.php', { 'index': current }, function(data) {
        current = data.index;
        for (var i= 0; i < data.data.length; i++) {
            var x = data.data[i].x;
            var y = data.data[i].y;
            // do your plotting here
        }
    });
}
// call pollData() every 5 seconds
var timer = window.setInterval(pollData, 5000);

请注意，这只是一个示例，它缺少所有错误检查（例如，在同一页面上同时调用 pollData() 会出现问题）。

【讨论】：

【解决方案2】：

听起来你的可视化部分已经大部分完成了。如果数据集太大而无法重新计算，您可能需要研究维护增量直方图的技术。以下是一些可能会有所帮助的论文：

【讨论】：

【解决方案3】：

首先，我不会在用户端生成图表。原因很简单：不是每个人都启用了 JavaScript（好吧，取决于您的目标群体），而且速度可能不是很快。

由于您已经在使用 PHP，因此我建议您使用像 pChart 这样的包来在服务器端创建图表。另一个积极的副作用是该包也带有缓存。例如，这将允许您仅在数据文本文件更改时创建图形（假设您也使用 PHP 生成它 - 否则您可以简单地检查文件是否在每次运行 PHP 脚本时被修改），因此节省大量资源；）

【讨论】：