通過切換超鏈接的點擊來呈現2個flotgraphs

在我的網站上繪製Flot條形圖是成功完成的。在頁面加載中，我包括了2個條形圖在div中，一個div樣式爲none.I有一個超鏈接， div中的樣式不會顯示，其他圖形應該是不可見的。我的代碼：通過切換超鏈接的點擊來呈現2個flotgraphs

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

newbar.php：

<?php 

    /* Your Database Name */ 
    $dbname = 'dbname'; 

    /* Your Database User Name and Passowrd */ 
    $username = 'username'; 
    $password = 'password'; 

    try { 
     /* Establish the database connection */ 
     $conn = new PDO("mysql:host=localhost;dbname=$dbname", $username, $password); 
     $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 

     $result = $conn->query("SELECT EquipmentMainCatagory,count(EquipmentMainCatagory) FROM `assetinfo` group by `EquipmentMainCatagory` HAVING EquipmentMainCatagory <>''"); 

     $rows = array(); 

     foreach($result as $r) { 

     $rows[] = array($r['EquipmentMainCatagory'],(int)$r['count(EquipmentMainCatagory)']); 

     } 

    // convert data into JSON format 
    $jsonTable = json_encode($rows); 

     //print_r($jsonTable); 
    } catch(PDOException $e) { 
     echo 'ERROR: ' . $e->getMessage(); 
    } 
    //mysql_close($conn); 

    $conn=null; 

    ?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Flot Bar Chart</title> 

<!--<style type="text/css"> 
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; } 
h1 { width: 450px; margin: 0 auto; font-size: 12px; text-align: center; } 
#placeholder { width: 450px; height: 200px; position: relative; margin: 0 auto; } 
.legend table, .legend > div { height: 82px !important; opacity: 1 !important; right: -55px; top: 10px; width: 116px !important; } 
.legend table { border: 1px solid #555; padding: 5px; } 
#flot-tooltip { font-size: 12px; font-family: Verdana, Arial, sans-serif; position: absolute; display: none; border: 2px solid; padding: 2px; background-color: #FFF; opacity: 0.8; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } 
</style>--> 

<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]--> 
<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 src="assets/plugins/flot/jquery.flot.time.min.js" type="text/javascript"></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="placeholder" 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($("#placeholder"), dataset, options); 
      $("#placeholder").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> 

</head> 

</html>

來源

2014-01-09 Harsha

這是因爲您不能運行PHP那樣。 – Goikiu

可以請您詳細說明嗎？ Goikiu – Harsha

對不起，我讀過更好，php代碼工作。你的麻煩是用Javascript。你有沒有試過看看控制檯調試會發生什麼？ – Goikiu

Flot需要一個固定大小的佔位符來繪製圖形。只要你的ID爲「2」的div是隱形的，它沒有大小。

爲了解決這個問題您的劇情對象保存到一個變量：

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

，並表示通過添加以下內容到abc函數的第二個格後繪製：

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

來源

2014-01-09 15:13:27 Raidri

謝謝你Raidri。它的工作。我也這樣做：函數plotoverall（） \t { $ .plot（$（「＃placeholder1」），dataset，options）; $（「＃placeholder1」）。UseTooltip（） ; \t}並在abc（）中調用該函數 – Harsha

不需JavaScript的jQuery的請。試試

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

來源

2014-01-09 13:53:37

否Sudharsan我也試過，點擊Hyperlinknothing會顯示在我的頁面上 – Harsha

回答

相關問題