2013-08-21 38 views
0

我想从我的mysql中获取数据到Highcharts条形图中。我有来自mysql的数据,包括每个端口的端口号和平均字节数。这是我的PHP查询和HTML页面。数据(平均字节)显示在图上就好了。我无法显示类别(端口)数据。Highcharts - 从mysql中获取类别

<?php 
$con = mysql_connect("localhost","root","kdkdkdk") or die(mysql_error()); 
mysql_select_db("silk", $con); 

$result = mysql_query("SELECT dstPortNum,avgByte FROM statistic_avgbytesport ORDER BY avgByte DESC LIMIT 10;"); 

$rows = array(); 
while($r = mysql_fetch_array($result)) { 
    $row[0] = $r[0]; 
    $row[1] = $r[1]; 
    array_push($rows,$row); 
} 

print json_encode($rows, JSON_NUMERIC_CHECK); 
#print json_encode($rows[0][0], JSON_NUMERIC_CHECK); 

mysql_close($con); 
?> 

而我的html页面显示图形。

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Highcharts Pie Chart</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      var options = { 
       chart: { 
        renderTo: 'avgbytes'     
       }, 
       title: { 
        text: 'Average Bytes Per Port' 
       }, 

       pane: { 
        size:'80%' 
       }, 

       xAxis: { 
        title: { 
         text: 'PORTS' 
        }, 
        categories: [] 
       }, 

       yAxis: { 
        min: 0, 
        title: { 
         text: 'Bytes' 
        } 
       }, 

       series: [{ 
        type: 'bar', 
        name: 'Average Bytes', 
        data: [] 
       }] 
      } 

      $.getJSON("averageBytesPerPort.php", function(json) { 
       options.series[0].data = json; 
       chart = new Highcharts.Chart(options); 
      }); 



     }); 
     </script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script src="http://code.highcharts.com/highcharts-more.js"></script> 

    </head> 
    <body> 
     <div id="avgbytes" style="width: 300px; height: 300px; margin: 0 auto"></div> 
    </body> 
</html> 
+0

你可以显示的JSON('console.log(JSON)'应该做的)?是否删除'类别:[]'行帮助? –

+0

删除类别[]确实会改变图表,但它仍然不是我正在寻找的东西。我看到从0到60k的自动数字计数,而不是查询中的单个端口号。 – user2646288

+0

你应该为此创建一个jsFiddle。因为getJSON()调用不起作用,所以你需要做一些事情,但至少我们可以看到你所看到的东西......并对其进行调整。它也可以强制你检查返回的JSON,以确保它是你的想法。 –

回答

0

您可以使用这样的事情:

$.getJSON("averageBytesPerPort.php", function(json) { 
    var options = { 
     chart: { 
      renderTo: 'avgbytes'     
     }, 

     title: { 
      text: 'Average Bytes Per Port' 
     }, 

     pane: { 
      size:'80%' 
     }, 

     xAxis: { 
      title: { 
       text: 'PORTS' 
      }, 
      categories: data.categories 
     }, 

     yAxis: { 
      min: 0, 
      title: { 
       text: 'Bytes' 
      } 
     }, 

     series: [{ 
      type: 'bar', 
      name: 'Average Bytes', 
      data: data 
     }] 
    } 

    chart = new Highcharts.Chart(options); 
}); 
0

如何在地球上的地狱您的数据显示,你有没有把$康恩作为 的mysql_query的第二个参数(); 它应该是

$result = mysql_query("SELECT dstPortNum,avgByte FROM statistic_avgbytesport ORDER BY avgByte DESC LIMIT 10;",$conn);