Php 使用下拉菜单呈现Flot条形图
我在我的网站上绘制flot条形图。我的要求就像我在区域上有一个区域下拉列表和另一个依赖国家下拉列表。在为特定国家选择区域和国家时，需要绘制条形图。每个页面都按预期呈现。但当我在单个php页面中包含这些页面时，我会得到一个错误为“无方法图”。我错了。 我的集成页面代码是：Php 使用下拉菜单呈现Flot条形图,php,jquery,flot,Php,Jquery,Flot,我在我的网站上绘制flot条形图。我的要求就像我在区域上有一个区域下拉列表和另一个依赖国家下拉列表。在为特定国家选择区域和国家时，需要绘制条形图。每个页面都按预期呈现。但当我在单个php页面中包含这些页面时，我会得到一个错误为“无方法图”。我错了。 我的集成页面代码是： <script type="text/javascript" src="../assets/plugins/jquery-1.8.1.min.js"></script> <script type=
<script type="text/javascript" src="../assets/plugins/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../assets/plugins/flot/jquery.flot.js"></script>
<script type="text/javascript" src="../assets/plugins/flot/jquery.flot.time.min.js"></script>
<script type="text/javascript" language="javascript" src="../assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="../assets/plugins/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript" language="javascript" src="../assets/plugins/flot/jquery.flot.tickrotatotor.min.js"></script>
<script type="text/javascript" language="javascript" src="../assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="../assets/plugins/flot/jquery.flot.labelangle.min.js"></script>
<script>
function graph()
{
alert("In graph function");
var yourSelect = document.getElementById('zoneddl');
if(yourSelect.options[yourSelect.selectedIndex].value =='overall')
{
alert("overall");
maindashoverall();
}
else if(yourSelect.options[yourSelect.selectedIndex].value =='overall1')
{
alert("overall1");
document.getElementById('overall1').style.display ="block";
document.getElementById('overall').style.display ="none";
maindashoverall1();
}
}
</script>
<select id="zoneddl" onChange="graph()">
<option value="0">select</option>
<option value="overall">OVERALL</option>
<option value="overall1">OVERALL1</option>
</select>
<div id="overall">
<?php include "graphs/maindashoverall.php"; ?>
</div>
<div id="overall1" style="display:none">
<?php include "graphs/maindashoverall1.php"; ?>
</div>
函数图（）
{
警报（“图形功能中”）；
var yourSelect=document.getElementById（'zoneddl'）；
如果（yourSelect.options[yourSelect.selectedIndex].value==“总体”）
{
警报（“整体”）；
maindashtotal（）；
}
else if（yourSelect.options[yourSelect.selectedIndex].value='overall1'）
{
警惕（“总体1”）；
document.getElementById（'overall1'）.style.display=“block”；
document.getElementById（'total'）.style.display=“无”；
MainDashOverall 1（）；
}
}
选择
总体上
总体1
<?php require_once('dbfile');
mysql_select_db($database_finalkms, $finalkms);
$query_getmaindata = "select `EquipmentMainCatagory`,count(`EquipmentMainCatagory`) from asset a join assetinfo ai on a.assetid=ai.assetid and upper(ai.EquipmentStatus) like upper('%Active%') group by `EquipmentMainCatagory`";
$getmaindata = mysql_query($query_getmaindata, $finalkms) or die(mysql_error());
$row_getmaindata = mysql_fetch_assoc($getmaindata);
$totalRows_getmaindata = mysql_num_rows($getmaindata);
$rows = array();
while($row_getmaindata = mysql_fetch_assoc($getmaindata))
{
$rows[] = array( $row_getmaindata['EquipmentMainCatagory'],(int)$row_getmaindata['count(`EquipmentMainCatagory`)']);
}
// convert data into JSON format
$jsonTable = json_encode($rows);
?>
<div id="placeholder1" style="width:900px;height:750px;"></div>
<script>
$(function maindashoverall() {
var data =<?php echo $jsonTable;?>;
var ticks = [];
for (var i = 0; i < data.length; i++) {
ticks.push([i,data[i][0]]);
data[i][0] = i;
}
var dataset = [{ data: data, color: "#5482FF" }];
var options = {
series: {
lineWidth: 5,
bars: {
show: true,
barWidth: 0.5,
align:"center"
}
},
xaxis: {
axisLabel: "EquipmentMainCatagory",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
ticks: ticks,
//rotateTicks:90
labelAngle: 90
},
yaxis: {
axisLabel: "# Assets",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
},
grid: {
hoverable: true,
borderWidth: 0,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
}
};
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong>");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y ,
left: x,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
$.plot($("#placeholder1"), dataset, options);
$("#placeholder1").UseTooltip();
});
</script>
<?php
mysql_free_result($getmaindata);
?>
<script type="text/javascript" src="../../assets/plugins/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../assets/plugins/flot/jquery.flot.js"></script>
<script type="text/javascript" src="../../assets/plugins/flot/jquery.flot.time.min.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/plugins/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/plugins/flot/jquery.flot.tickrotatotor.min.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/plugins/flot/jquery.flot.labelangle.min.js"></script>
<?php //require_once('dbfile.php');
mysql_select_db($database_finalkms, $finalkms);
$query_getmaindata = "select `EquipmentMainCatagory`,count(`EquipmentMainCatagory`) from asset a join assetinfo ai on a.assetid=ai.assetid and upper(ai.EquipmentStatus) like upper('%Active%') group by `EquipmentMainCatagory` order by count(`EquipmentMainCatagory`) desc";
$getmaindata = mysql_query($query_getmaindata, $finalkms) or die(mysql_error());
$row_getmaindata = mysql_fetch_assoc($getmaindata);
$totalRows_getmaindata = mysql_num_rows($getmaindata);
$rows = array();
while($row_getmaindata = mysql_fetch_assoc($getmaindata))
{
$rows[] = array( $row_getmaindata['EquipmentMainCatagory'],(int)$row_getmaindata['count(`EquipmentMainCatagory`)']);
}
// convert data into JSON format
$jsonTable = json_encode($rows);
?>
<div id="placeholder2" style="width:900px;height:750px;"></div>
<script>
$(function maindashoverall1() {
var data =<?php echo $jsonTable;?>;
var ticks = [];
for (var i = 0; i < data.length; i++) {
ticks.push([i,data[i][0]]);
data[i][0] = i;
}
var dataset = [{ data: data, color: "#5482FF" }];
var options = {
series: {
lineWidth: 5,
bars: {
show: true,
barWidth: 0.5,
align:"center"
}
},
xaxis: {
axisLabel: "EquipmentMainCatagory",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
ticks: ticks,
labelAngle: 90
},
yaxis: {
axisLabel: "# Assets",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
},
grid: {
hoverable: true,
borderWidth: 0,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
}
};
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
// "<strong>" + y + "</strong>");
item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong>");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y ,
left: x,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
var $overall1 = $.plot($("#placeholder2"), dataset, options);
$("#placeholder2").UseTooltip();
});
</script>
<?php
mysql_free_result($getmaindata);
?>
在集成页面中，在集成页面的开头加载所有javascript文件一次，在maindashoverall1.php的开头加载一次。删除maindashoverall1.php
文件中的块
在加载jquery.flot.axislabels.js
的地方还有两行（每个块）。也删除其中一个。确保按正确顺序加载所有必要的javascript文件，并且只加载一次。（例如，jquery.flot.axislabels.js
）。如果这没有帮助，请尝试构建一个复制错误的。这比查看代码墙
更简单。错误意味着您在加载jquery.flot.js
之前调用了$.plot
方法。如果我在遵循你的代码，你也会多次加载jquery和flot，这不是一个好主意。你能澄清一下@mark吗？请看我的答案。