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

实时更新2个系列的Flot图

1 个答案: