实时更新具有 2 个系列的 Flot 图

Question

我正在使用 jquery 和 flot 显示 2 个时间序列的值。我使用它们一小段时间，现在我坚持使用这些示例。基本上，我调整了几个示例，以使用我包含在 JQuery 脚本中的 PHP 脚本从 MySQL 数据库中提取系列。到目前为止一切正常。我希望能够每隔几秒钟刷新一次这个系列。此刷新似乎不起作用，我不知道为什么。 Bellow 是用于生成图形的 jquery 代码。我现在把脚本的第一部分放在上面。

    $(function(){ 

  //add data source to flot. 2 datasets with same structure: data in UNIX_TIMESTAMP format, value in DECIMAL format

    <?php include 'datasource.php'; ?>;

  //declare datasets

  var datasets = {
        "temperature": {
            label: "Temperature (C)",
            data:   <?php echo json_encode($dataset1); ?>
        },
        "humidity": {
            label: "Humidity (%)",
            data:   <?php echo json_encode($dataset2); ?>
        }
    };

    //set fixed colors for each series
    var i = 0;
    $.each(datasets, function(key, val) {
        val.color = i;
        ++i;
    });

    // insert checkboxes
    var choiceContainer = $("#choices");
    $.each(datasets, function(key, val) {
        choiceContainer.append('&nbsp;&nbsp;<input type="checkbox" name="' + key +
                               '" checked="checked" id="id' + key + '">' +
                               '<label for="id' + key + '">'
                                + val.label + '</label>');
    });
    choiceContainer.find("input").click(plotAccordingToChoices);
    //define plot options
    var options = {series: { shadowSize: 0 },
              yaxis: { min: <?php echo json_encode($mintemp) ?>, max: <?php echo json_encode($maxtemp) ?> },
              xaxis: { show: true, mode: "time", timeformat: "%h:%M %d.%m.%y", labelWidth: "10"}};
    //draw plot
    function plotAccordingToChoices() {
             var data = [];
             choiceContainer.find("input:checked").each(function () {
             var key = $(this).attr("name");
             if (key && datasets[key])
                data.push(datasets[key]);
        });
        if (data.length > 0)
           $.plot($("#placeholder"), data, options);
    }
    plotAccordingToChoices();
    //define plot refresh timeout
    setInterval(plotAccordingToChoices(), 3000);})

Answer 1

setInterval 的第一个参数应该是一个字符串：

setInterval('plotAccordingToChoices()', 3000);

或者只有函数名（不调用它）：

setInterval(plotAccordingToChoices, 3000);

见：https://developer.mozilla.org/en/window.setInterval

---

要从服务器端 (PHP) 获取更新的数据，您还需要进行远程调用 (AJAX)。你可以使用jQuery getScript function。

类似这样的：

function updatePlot() {
    $.getScript('update_plot.php');
}
setInterval(updatePlot, 3000);

然后，在您的 update_plot.php 文件中，您可以返回与 PHP 混合的 JavaScript 代码（就像您已经做过的那样）：

<?php // here some PHP code to get your data ?>
// and here some javascript code to use the data
plotAccordingToChoices(); // and finally update the plot