使用dropdowns渲染Flot条形图

我在我的网站上绘制flot条形图。我的要求就像我有一个区域下拉菜单和另一个依赖国家的区域下拉菜单。在该特定国家的区域和国家的选择上，条形图需求被绘制。每个页面都按预期渲染。但是当我在单个php页面中包含这些页面时，我得到一个错误信息为“无方法情节”，我错了。我对集成页面的代码是：使用dropdowns渲染Flot条形图

<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>

代码为个别网页如下。 maindashoverall.php：

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

maindashoverall1.php：

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

来源

2014-01-23 Harsha

请确保您以正确的顺序加载所有必需的JavaScript文件并且只加载一次。（例如'jquery.flot.axislabels.js'）。 – Raidri

如果这没有帮助，请尝试构建一个[fiddle]（http://jsfiddle.net），它会重现错误。那么查看你的'代码墙'就简单多了。 – Raidri

这个错误意味着你在加载'jquery.flot.js'之前调用'$ .plot'方法*。如果我跟着你的代码，你也加载jQuery和多次，这不是一个好主意。 – Mark

在你的集成页面中，你曾经在综合页面开始在加载所有的JavaScript文件，并再次maindashoverall1.php开头。删除maindashoverall1.php文件中的块。

你也有两行（每块），你加载jquery.flot.axislabels.js。删除其中的一个。

来源

2014-01-24 10:43:27 Raidri

使用dropdowns渲染Flot条形图

回答

相关问题