在高级图表中创建饼图

时间:2013-03-02 13:02:15

标签: php mysql highcharts

我在MySQL中有一个包含以下数据的表

Buy_client    Amount

ABC            6597
XYZ            4479
PQR            2075
qqq            1706
ttt            1030
Other          450

我想在High Charts的饼图中显示以下数据。有人请帮帮我。我是PHP和HighCharts的新手

问题1:我需要根据此数据创建饼图

问题2:我正在使用HighCharts。有人请帮我在HighCharts中做到这一点


我使用以下代码执行此操作,但它不会在饼图中显示信息,只是在Web浏览器中显示数据

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>




<?php
$con = mysql_connect("localhost","root","");

if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db("offlinesurv", $con);

$my_data = mysql_query("SELECT * FROM top_buy_clients");

while($row = mysql_fetch_array($my_data)) {
echo $row['buy_client'] . "\t" . $row['qty']. "\n";
}


?> 

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"> 
    $(function () {
     var chart;
     $(document).ready(function() {
     chart = new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false
     },
     title: {
          text: 'Browser market shares at a specific website, 2010'
            },
     tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage}%</b>',
        percentageDecimals: 1
            },
     plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: 'green',
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [ <?php echo $row; ?>]
        }]
    });
});

});
    </script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</body>
 </html>

1 个答案:

答案 0 :(得分:1)

在你的php ...你在数据库中进行查询....在while循环中,你需要构造和字符串,在循环结束时字符串应该是这样的:

    $my_data = "['ABC',   6597],
                ['XYZ',   4479],
                ['PQR',   2075],
                ['qqq',   1706],
                ['ttt',   1030],
                ['Others', 450] ";

然后在你的javascript文件中,你应该有这样的一行

series: [{
            type: 'pie',
            name: 'Pie Data',
            data: [
                <?php echo $my_data; ?>
            ]
        }]

这很简单。

Saludos。