从mysql ajax js中提取数据的flot图表答案

【问题标题】：flot chart pulling data from mysql ajax js从mysql ajax js中提取数据的flot图表
【发布时间】：2017-06-06 11:42:44
【问题描述】：

我正在尝试从 mysql 数据库中提取数据并绘制在浮点图中。我看过几十个帖子，但它对我不起作用。我成功获得了在 php 中工作的浮点图表 http://oven.luckybat.space/batoven1.0_s.php

首先这里是数据的 url intellipool.overcast.net.au/PCsystem/getdataforflot.php 它似乎是正确的格式。我想绘制温度与时间的关系

我在加载运行此脚本的页面时收到“错误警报”

有一个

     <p> id="graph3" style="width:1000px;height:500px;">graph3</p>

在 wordpress 网页上

感谢帮助

$.ajax({
  type: "GET",
  dataType: 'json',
  url: 'http://intellipool.overcast.net.au/PCsystem/getdataforflot.php',


    error: function() {
      alert("An error occurred.");
    },
  success: function(data) {
    alert("got the data dude");
    var options = {
      xaxis: {
        mode: "time",
        mintickSize: [1, "hours"],
        axisLabel: 'Time',
        min: ((new Date().getTime()) - 24 * 60 * 60 * 1000),
        max: (new Date()).getTime()
      },
      yaxes: [{
        tickFormatter: function(val, axis) {
          return val + "\u00B0C";
        },
        max: 50,
        axisLabel: "Temperature",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelPadding: 5
      }, {
        position: "right",
        tickFormatter: function(val, axis) {
          return val + "%";
        },
        max: 100,
        axisLabel: "Humidity",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelPadding: 10
      }],
    };
    $.plot("#graph3", data, options);
  }

});

按照我添加的说明

         <header> ('Access-Control-Allow-Origin: *'); </header>

致http://intellipool.overcast.net.au/PCsystem/getdataforflot.php

我仍然收到错误，我需要在服务器上做更多事情吗（通过联系主机？）

我需要将传入的 JSON 数据分配给变量吗？

完整的函数（）是

 function ajaxplot() {  
 document.write('hello!! there ajaxplot() AJAX has been called');
 $.ajaxSetup({ cache: false });

  $.ajax({
    type: "GET",
    dataType: 'json',
    url: 'http://intellipool.overcast.net.au/PCsystem/getdataforflot.php',

    error: function() {
    alert("An error occurred.");
  },
success: function(data) {
   alert("got the data dude");
   var options = {
    xaxis: {
    mode: "time",
    mintickSize: [1, "hours"],
    axisLabel: 'Time',
     min: ((new Date().getTime()) - 24 * 60 * 60 * 1000),
     max: (new Date()).getTime()
  },
  yaxes: [{
    tickFormatter: function(val, axis) {
      return val + "\u00B0C";
    },
    max: 50,
    axisLabel: "Temperature",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelPadding: 5
  }, {
    position: "right",
    tickFormatter: function(val, axis) {
      return val + "%";
    },
    max: 100,
    axisLabel: "Humidity",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelPadding: 10
  }],
};
$.plot("#graph3", data, options);
}

 });
}

【问题讨论】：

它只显示No 'Access-Control-Allow-Origin' header is present on the requested resource.这个错误意味着你可以找到here
所以 $ajax url 需要和 js 代码所在的网站是同一个域？？
是的，这正是问题所在，您是否有权访问您所调用的服务器 http://intellipool.overcast.net.au/PCsystem/getdataforflot.php ？如果是，则必须Enable CORS 到服务器
我已将 $ajax url 文件移至 overcast.net.au/getdataforflot.p‌hp，但仍无法正常工作！如果我也移动所有 .js 文件，那会起作用吗？我可以询问网络托管人是否可以更改“启用 CORS 到服务器”
这是测试overcast.net.au/js-tests

标签： jquery mysql ajax charts flot

【解决方案1】：

打开你的http://overcast.net.au/js-tests/链接打开控制台写下函数

function ajaxplot() {   
$.ajaxSetup({ cache: false });

$.ajax({
  type: "GET",
  dataType: 'json',
  url: '/getdataforflot.php',
  error: function() {
      alert("An error occurred.");
    },
  success: function(data) {
    debugger;
    alert("got the data dude");
    //var data1 = [[1496765558000,"26"],[1496764656000,"26"],[1496763754000,"26"],[1496762851000,"26"],[1496761949000,"26"]];
    var data1 = data;
    var options = {
      xaxis: {
        mode: "time",
        mintickSize: [1, "hours"],
        axisLabel: 'Time',
         min: ((new Date().getTime()) - 24 * 60 * 60 * 1000),
         max: (new Date()).getTime()
      },
      yaxes: [{
        tickFormatter: function(val, axis) {
          return val + "\u00B0C";
        },
        max: 50,
        axisLabel: "Temperature",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelPadding: 5
      }, {
        position: "right",
        tickFormatter: function(val, axis) {
          return val + "%";
        },
        max: 100,
        axisLabel: "Humidity",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelPadding: 10
      }],
    };
    $.plot("#graph3", data1, options);
    },

});
}

那么

在控制台中调用ajaxplot() 应该可以工作。

查看截图

在您的控制台中，有许多错误都可以解决，它应该可以工作..

【讨论】：