Question

我使用下面的代码将数据绘制成flot，当我打印出dataOne时，它会返回正确格式化的flot值，但是当我将其设置为flot to graph的数据时，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>

Answer 1

最后到了问题的根源。如果它是有效的JSON，dataOne必须是数组数组：

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

请注意额外的括号。仔细检查console.log。

这样做：

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

在JavaScript中

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

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

var d = [dataOne];

然后只是

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

Answer 2

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

首先，产生PHP文件收集值的页面不正确。 Arduino每秒都使用AJAX来更新值，但我意识到这是愚蠢的，因为从主AJAX调用每隔一秒调用一次页面调用data.php然后调用此页面。所以我从Arduino Web服务器代码中删除了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去除最后一个包含的括号，然后附加逗号，空格和值，并将包含的括号再次放在数据的最末端。

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

使用AJAX无法将数据转换为Flot

2 个答案: