Question

我正在我的网站上绘制flot条形图。我的要求就像我有一个区域下拉菜单和另一个依赖国家/地区下拉区域。在选择特定国家/地区的区域和国家/地区时，需要绘制条形图。每个页面都按预期呈现。但是当我在单个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>
<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);
?>

Answer 1

在您的集成页面中，您将在集成页面的开头加载所有javascript文件，并在maindashoverall1.php的开头再次加载。删除maindashoverall1.php文件中的块。

您还有两行（每个块）加载jquery.flot.axislabels.js。删除其中一个。

使用下拉菜单渲染Flot条形图

1 个答案: