使用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>

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>

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.