Php Highcharts——从mysql获取类别_Php_Javascript_Mysql_Json_Highcharts

Php Highcharts——从mysql获取类别

php javascript mysql json highcharts

Php Highcharts——从mysql获取类别,php,javascript,mysql,json,highcharts,Php,Javascript,Mysql,Json,Highcharts,我正试图将mysql中的数据转换成Highcharts条形图。我有来自mysql的数据，其中包括端口号和每个端口的平均字节数。下面是我的php查询和html页面的内容。数据（平均字节）在图形上显示得很好。我无法获取要显示的类别（端口）数据 <?php $con = mysql_connect("localhost","root","kdkdkdk") or die(mysql_error()); mysql_select_db("silk", $con); $result = mysql

我正试图将mysql中的数据转换成Highcharts条形图。我有来自mysql的数据，其中包括端口号和每个端口的平均字节数。下面是我的php查询和html页面的内容。数据（平均字节）在图形上显示得很好。我无法获取要显示的类别（端口）数据

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


海图饼图
$（文档）.ready（函数（）{
变量选项={
图表：{
renderTo:'平均字节'
},
标题：{
文本：“每个端口的平均字节数”
},
窗格：{
尺寸：'80%'
},
xAxis：{
标题：{
文本：“端口”
},
类别：[]
},
亚克斯：{
分:0,，
标题：{
文本：“字节”
}
},
系列：[{
类型：'bar'，
名称：'平均字节'，
数据：[]
}]
}
$.getJSON（“averageBytesPerPort.php”，函数（json）{
options.series[0].data=json；
图表=新的高点图表。图表（选项）；
});
});

您可以使用以下内容：

$.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);
});

你的数据到底是怎么显示的，你还没有把$conn作为 mysql_query（）；应该是

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

你能展示一下json（'console.log（json）'应该怎么做吗？删除“categories:[]”行是否有帮助？删除categories[]确实会稍微改变图形，但它仍然不是我想要的。我看到一个从0到60k的自动计数，而不是查询中的单个端口号。由于getJSON（）调用不起作用，您需要做一些修改，但至少我们可以看到您看到的内容。。。并调整它。它还可以迫使您检查返回的JSON，以确保它是您所认为的。