Javascript Can'；t使用AJAX将数据导入Flot_Javascript_Php_Jquery_Json_Flot

Javascript Can'；t使用AJAX将数据导入Flot

javascript php jquery json

Javascript Can'；t使用AJAX将数据导入Flot,javascript,php,jquery,json,flot,Javascript,Php,Jquery,Json,Flot,我正在使用下面的代码将数据绘制到flot中，当我打印出dataOne时，它会为flot返回正确格式的值，但是当我将其设置为flot to graph的数据时，flot会形成一个图形，但没有数据点 <!DOCTYPE HTML> <html> <head> <title>AJAX FLOT</title> <script language="javascript" type="text/javascript" s

我正在使用下面的代码将数据绘制到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>


阿贾克斯弗洛特
变量选项={
线路：{
秀：真的
},
要点：{
秀：真的
},
亚克斯：{
最小值：“0”，
马克斯：“1023”
},
xaxis：{
模式：“时间”
}
};
函数更新（）{
$.ajax({
url:“http://localhost/data.php",
上下文：document.body
}).完成（功能（响应）{
数据一=响应；
var d=“[”+dataOne+“]”；
变量绘图=$.plot（$（'占位符'），[d]，选项）；
设置超时（更新，1000）；
});
}
更新（）；

最终找到问题的根源。如果它是有效的JSON，

dataOne

必须是数组数组：

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

注意额外的括号。检查

控制台。仔细记录
这样做：
var d = "[" + dataOne + "]";

在JavaScript中，自动将其转换为字符串
您需要的是数组的数组（最里面的是一个点，第二个是一个系列，外面是系列的集合）：
然后就
var plot = $.plot($('#placeholder'), d, options);

对于那些可能想做类似事情的人，下面是我最终使其工作的代码：
首先，生成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>

不仅可以得到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去掉最后一个包含的括号，然后添加逗号、空格和值，并将包含的括号再次放在数据的最末尾
不管怎样，这一切都像做梦一样成功了。谢谢大家的帮助：）
您的数据格式错误。此$current.='['.$t'，'.$data']'显示您正在引用数字并使其成为字符串。执行console.log（series）
并用输出更新您的问题。在这里的代码中，一旦进入var数据，它就不起作用。我有一个php页面在输出进入变量之前将其打印出来，并且它的格式正确，因为我得到了一个基于php的图形，它使用相同的输出$.ajax（{url:，context:document.body}）。done（函数（响应）{//获取ajax响应dataOne=response；//如果数据不为空，则设置绘图的数据。var数据=[{标签：“Blackwood River Level”，数据：[dataOne]}]；var绘图=$。绘图（$（'.#占位符'），数据，选项）；如果执行文档写入（数据），则返回[object]，但是flot仍然识别标签，所以它只是在发生这种情况的地方打印它。在这里的代码中，一旦它进入var数据，它就不工作了
，这意味着什么？错误是什么？console.log（series）产生了什么？@Mark我更新了问题，使它更清楚。做一个console.log（dataOne）返回如下值：[141239377500277]，[141239377000277]，[141239377000277]，[141239377000277]这仍然不起作用：\？php文件没有将这些值放在必要的一对包含括号内，这就是为什么console.log没有显示这些值的原因，因为我必须将它们添加到Javascript中，这就是我尝试使用var d所做的事情=“[“+dataOne+”]”；
file_get_contents

<?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;
}

?>