使用 highcharts api 和 mysql 显示饼图答案

【问题标题】：display pie chart using highcharts api and mysql使用 highcharts api 和 mysql 显示饼图
【发布时间】：2019-03-06 04:49:24
【问题描述】：

我有一个问题。我想使用 highcharts api 显示一个饼图。数据来自 MySQL 数据库。我的表是这样的（这是我的表格式）：

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

我的 PHP 代码是

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

我一直在显示一个饼图，但我的数据是这样的（这是示例）：

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

但正如我之前提到的关于我的表格结构的，饼图没有显示出来。

我的js代码：

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);

                });	
				
				
				
				}

【问题讨论】：

你的JS代码在哪里？
不需要但我已经添加了
这个print json_encode($rslt, JSON_NUMERIC_CHECK);代码为你打印了什么？
饼图是什么样的？
你应该有类似[10,20,30] 或者最好是[{name: 'A', y: 10}, {name: 'B, y: 20}, {name: 'C', y: 30}] 的数据。

标签： javascript php mysql highcharts

【解决方案1】：

因此，您的数据采用可怕的“实体-属性-值”格式，即...complicated。

这意味着不要像写一个漂亮的查询

select area, blank from cities where id=1

您现在必须在所有查询中将数据从行整理到列中

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

我建议不要使用 EAV 来存储您的数据。

【讨论】：

【解决方案2】：

这里是使用 highcharts api 绘制饼图的答案。当数据为水平格式时。

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

【讨论】：