我正在尝试从mysql数据库中提取数据并在flot图表中绘图。我已经看过几十个帖子,但它对我不起作用。 我成功地获得了在php中工作的flot图表 http://oven.luckybat.space/batoven1.0_s.php
首先,这是数据的网址 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);
}
});
}
答案 0 :(得分:0)
打开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()
。
在你的控制台中有许多错误解决所有问题,它应该可以正常工作..