Javascript 通过在超链接上单击切换来渲染2个FlotGraph

在我的网站上，Flot条形图的绘制已成功完成。在pageload上，我在div中包含2个条形图，其中一个div样式为none。单击时，我有一个超链接，该div中样式为none的图形将可见，而另一个图形应不可见。 我的代码：

Javascript:

function abc()
{
    alert("hi");
    document.getElementById('none').style.display='none';
    document.getElementById('two').style.display='block';

}

PHP代码：

<a onclick="abc()" href="#">click me</a>
<div id="one">
<?php include "graphs/newbar.php";?>
</div>

<div id="two" style="display:none">
<?php include "graphs/anotherbarquery.php";?>
</div>

单击超链接时，第二个图形不可见

anotherbarquery.php：

<?php require_once('../../Connections/finalkms.php'); ?>
<?php
mysql_select_db($database_finalkms, $finalkms);
$query_get_couunt = "SELECT  EquipmentMainCatagory,count(EquipmentMainCatagory) FROM `assetinfo` group by `EquipmentMainCatagory` HAVING EquipmentMainCatagory <>''";
$get_couunt = mysql_query($query_get_couunt, $finalkms) or die(mysql_error());
$row_get_couunt = mysql_fetch_assoc($get_couunt);
$totalRows_get_couunt = mysql_num_rows($get_couunt);

$rows = array();

while($row_get_couunt = mysql_fetch_assoc($get_couunt))
{
$rows[] = array( $row_get_couunt['EquipmentMainCatagory'],(int)$row_get_couunt['count(EquipmentMainCatagory)']); 
}
// convert data into JSON format
$jsonTable = json_encode($rows);
print_r($jsonTable);    

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

<div id="placeholder1" style="width:900px;height:450px;"></div>
 <script type="text/javascript">
        //******* 2012 Average Temperature - BAR CHART
        var data =<?php echo $jsonTable;?>;
        //alert(data);

//var data = [["item1",277],["item2",635],["item3",133]];

var ticks = [];
for (var i = 0; i < data.length; i++) {
    ticks.push([i,data[i][0]]);
    data[i][0] = i;   
}
alert(ticks);
        //var data = [[0, 11],[1, 15],[2, 25],[3, 24],[4, 13],[5, 18]];
        var dataset = [{ data: data, color: "#5482FF" }];
        //var ticks = [[0, "London"], [1, "New York"], [2, "New Delhi"], [3, "Taipei"],[4, "Beijing"], [5, "Sydney"]];

        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"] }
            }
        };

        $(document).ready(function () {
            $.plot($("#placeholder1"), dataset, options);
            $("#placeholder1").UseTooltip();
        });

      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);
        }
    </script>

<?php
mysql_free_result($get_couunt);
?>

弗洛特条形图
//*******2012年平均温度-条形图
var数据=；
//警报（数据）；
//风险值数据=[“项目1”，277]，“项目2”，635]，“项目3”，133]；
var=[]；
对于（变量i=0；i”+y+“”；
item.series.xaxis.ticks[x]。标签+”：“+y+””；
}    
}否则{
$（“#工具提示”）.remove（）；
previousPoint=null；
}
});
};
函数显示工具提示（x、y、颜色、内容）{
$（''+内容+''）.css({
位置：'绝对'，
显示：“无”，
上图：y，
左:x,，
边框：“2倍纯色”+彩色，
填充：“3px”，
“字体大小”：“9px”，
“边界半径”：“5px”，
“背景色”：“fff”，
“字体系列”：“Verdana、Arial、Helvetica、Tahoma、sans serif”，
不透明度：0.9
}).appendTo（“body”）.fadeIn（200）；
}

请用jquery代替javascript。试试看

$(function() {
    $("a").click( function() {
           $("#one").hide();
           $("#two").show();
      });
});

---

Flot需要一个固定大小的占位符来绘制图形。只要id为“2”的div不可见，它就没有大小

要修复此问题，请将绘图对象保存到变量：

var $plot2 = $.plot($("#placeholder"), dataset, options);

并在显示第二个div后通过将其添加到

abc

函数中来绘制：

$plot2.setupGrid();
$plot2.draw();

---

这是因为你不能用那种方式运行php。你能详细说明一下吗？GoikiuSorry，我读得比较好，php代码正在运行。您的问题在于Javascript。您是否尝试查看控制台调试的结果？@user3171940:您有一个输入错误：document.getElementById（'none'）.style.display='none'；实际上应该是document.getElementById（'one'）.style.display='none'；很抱歉我的打字错误：（.即使在那时，当我点击超链接时，第一个图形也消失了。没有Sudharsan，我也尝试过，点击超链接时，我的页面上没有显示任何内容。谢谢你，Raidri。它起了作用。我也做过以下操作：函数plotoverall（）{$.plot（$（“#占位符1”）、数据集、选项）$(“#placeholder 1”）.UseTooltip（）；}并在abc（）中调用该函数

$plot2.setupGrid();
$plot2.draw();