无法使用 AJAX 将数据输入 Flot答案

【问题标题】：Can't Get Data Into Flot With AJAX无法使用 AJAX 将数据输入 Flot
【发布时间】：2014-10-03 09:40:54
【问题描述】：

我正在使用下面的代码将数据绘制到 flot 中，当我打印出 dataOne 时，它会为 flot 返回格式正确的值，但是当我将其设置为 flot 到图形的数据时，flot 会形成一个图形但随后有没有数据点？

<!DOCTYPE HTML>
<html>
  <head>
    <title>AJAX FLOT</title>
    <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
  </head>
  <body>
  <div id="placeholder" style="width: 100%;height: 600px;"></div>
    <script language="javascript" type="text/javascript">
var options = {
  lines: {
    show: true
  },
  points: {
    show: true
  },
  yaxis: {
    min: "0",
    max: "1023"
  },
  xaxis: {
    mode: "time"
  }
};
function update() {
$.ajax({
  url: "http://localhost/data.php",
  context: document.body
}).done(function(response) {

  dataOne = response;

  var d = "[" + dataOne + "]";

  var plot = $.plot($('#placeholder'), [d], options);


  setTimeout(update, 1000);
});
}
update();
</script>
</html>

【问题讨论】：

您的数据格式错误。这个$current .= '[' . $t . ', ' . $data . ']'; 告诉我你正在引用数字并将它们变成字符串。执行console.log(series) 并使用输出更新您的问题。
在此代码中，一旦进入 var 数据，它就不起作用。我有一个 php 页面在输出进入变量之前打印输出，并且它的格式正确，因为我有一个基于 PHP 的图形处理相同的输出 $.ajax({ url: "localhost/data.php", context: document.body }).done(function(response) { // 获取 ajax 响应 dataOne = response; // 如果 data 不为空，设置你的绘图数据 var data = [ { label: "Blackwood River Levels", data: [ dataOne ] } ]; var plot = $.plot($('#placeholder'), data, options);
如果我执行 document.write(data)，它会返回 [object Object]，但是 flot 仍然可以识别标签，所以它只是在发生这种情况的地方打印它。
In this code here, as soon as it goes into the var data it doesn't work，这是什么意思？有什么错误？ console.log(series) 产生了什么？
@Mark 我已经更新了问题以使其更加清晰。执行 console.log(dataOne) 会返回如下值：[1412393775000, 277], [1412393777000, 277], [1412393778000, 277]

标签： javascript php jquery json flot

【解决方案1】：

终于找到问题的根源。如果是有效的 JSON，dataOne 必须是数组数组：

[[1412393775000, 277], [1412393777000, 277], [1412393778000, 277]]

注意多余的括号。仔细检查您的console.log。

这样做：

var d = "[" + dataOne + "]";

在 JavaScript 中，自动将其转换为字符串。

你需要的是一个array of array的array（最里面是一个点，第二个是一个系列，最外面是一个系列的集合）：

var d = [dataOne];

然后就

var plot = $.plot($('#placeholder'), d, options);

【讨论】：

这仍然行不通：\？ php文件没有将值放在必要的一对包含括号内，这就是为什么console.log没有显示它们，因为我必须将它们添加到Javascript中，这就是我试图用var d做的事情= "[" + dataOne + "]";

【解决方案2】：

对于那些可能想要做类似事情的人，这里是我用来最终使它工作的代码。 :)

首先，生成 PHP 文件收集的值的页面不正确。 Arduino 使用 AJAX 每秒更新一次值，但我意识到这很愚蠢，因为该页面每秒都会从名为 data.php 的主 AJAX 调用中调用，然后调用此页面。所以我从 Arduino Web Server 代码中删除了 AJAX。

由于代码无法正常工作，并且我花了几个小时尝试，我开始四处寻找替代方案。在 highcharts.js 中，我找到了一些 AJAX 代码，并决定尝试一下。这是我最终得到的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <title>AJAX FLOT</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
        <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
        <script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
      </head>
      <body>
      <div id="placeholder" style="width: 100%;height: 600px;"></div>
      <div id="div" style="width: 100%; height: 100px;"></div>
        <script type="text/javascript">
    var options = {
      lines: {
        show: true
      },
      points: {
        show: true
      },
      xaxis: {
        mode: "time"
      }
    };
window.setInterval(function(){
    $.getJSON('http://localhost/data.php', function (csv) {

      dataOne = csv;

      var plot = $.plot($('#placeholder'), [dataOne], options);


    });
}, 1000);
    </script>
    </html>

在那之后，我必须让 data.php 正常工作。我有一个问题

file_get_contents

不仅可以获得 Arduino 的输出，还可以获得围绕它的许多标签。这塞满了我的数据。所以我放弃了正确的 html 标签，只打印了纯值。因此，如果您转到 Arduino 输出的页面源代码，则该值周围没有标签，您看到的只是一个数字。这样就停止了这个问题。

这是我用来格式化值的 php 代码：

<?php

$file = "data.txt";
$webpage = "http://192.168.1.177/";
$t = time() * 1000;

$current = file_get_contents($file);
$data = file_get_contents($webpage);


if ($current < "1") {
    $current .= '[[' . $t . ', ' . $data . ']]';
    file_put_contents($file, $current);
    echo $current;
}
else {
    $cut = substr($current, 0, -1);
    $cut .= ', [' . $t . ', ' . $data . ']]';
    file_put_contents($file, $cut);
    echo $cut;
}

?>

要将数据放入适当的括号中，您可以看到，当文件中没有数据时，if 语句不包含逗号和空格，因为没有其他数据集可供分隔。一旦文件中有一个值，我就使用 substr 删除最后一个包含括号，然后附加逗号、空格和值，并将包含括号再次放在数据的最末尾应该在的位置。

无论如何，这最终像梦一样工作。感谢大家的帮助:)

【讨论】：