duanpai6581
duanpai6581
2019-03-06 04:49
浏览 98

使用highcharts api和mysql显示饼图

I have a query. I want to display a pie chart using the highcharts api. The data is coming from a MySQL database. My table is like (THIS IS MY TABLE FORMAT):

city|area|blank
A   |100 |50
B   |50  |20

My PHP code is

<?php

include "con.php";

$id = $_GET['city'];


$result = mysqli_query($con,"SELECT   area AS A , blank  AS B from `table`  WHERE city = '".$id."' ");

$rows['type'] = 'pie';
$rows['name'] = 'area';
//$rows['innerSize'] = '50%';
while ($r = mysqli_fetch_array($result)) {
    $rows['data'][] = array($r['A'], $r['B']);    
}
$rslt = array();
array_push($rslt,$rows);

print json_encode($rslt, JSON_NUMERIC_CHECK);
mysqli_close($con);

I have been displaying a pie chart but my data was like this (THIS IS EXAMPLE):

id|category|value
1 |area    |100
1 |blank   |20
2 |area    |50
2 |blank   |20

but as I mentioned regarding my table structure earlier, the pie chart is not displaying with it.

My js code:

var c = $('#City :selected').text(); 

                 getAjaxData(c);
                 
    var opt = {
                    chart: {
                        renderTo: 'container1',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'final chart'
                    },
                    
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>' + this.point.name + '</b>: ' + this.y;
                                }
                            },
                            showInLegend: true
                        }
                    },
                    series: []
                };
                function getAjaxData(c) {
                $.getJSON("file.php", {city:c},function(json) {
                    opt.series = json;
                    chart = new Highcharts.Chart(opt);

                }); 
                
                
                
                }

</div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • douye2488
    douye2488 2019-03-06 09:50
    已采纳

    here is the answer to plot pie chart using highcharts api. when data is in horizontal format.

    $result = mysqli_query($con,"SELECT   area AS A , blank  AS B from `table`  WHERE city = '".$id."' ");
    
    $rows['type'] = 'pie';
    $rows['name'] = 'values';
    $p = 'area';//add this variable for the datalables
    $a = 'blank';//add this variable for the datalables
    //$rows['innerSize'] = '50%';
    while ($r = mysqli_fetch_array($result)) {
        $rows['data'][] = array($p, $r['A']); 
        $rows['data'][] = array($a, $r['B']);    
    }
    $rslt = array();
    array_push($rslt,$rows);
    
    
    print json_encode($rslt, JSON_NUMERIC_CHECK);

    </div>
    
    点赞 评论
  • dougaojue8185
    dougaojue8185 2019-03-06 05:16

    So, your data is in the dreaded "entity-attribute-value" format which is...complicated.

    That means that instead of writing a nice query like

    select area, blank from cities where id=1
    

    you now have to wrangle the data from rows into columns in all your queries

    select c1.value as area,
      c2.value as blank
      from cities c1
      inner join cities c2 on c1.id=c2.id
      where c1.category='area'
      and c2.category='blank'
      and c1.id=1
    

    I'd suggest not using EAV to store your data.

    点赞 评论

相关推荐