[英]MySQL Data to Highchart's Pie Chart using JSON
我正在尝试使用从MySQL数据中获取的数据创建一个HighCahrts JS的PIE CHART,我将其提取到JSON格式中。
这是我的PHP代码:
foreach($row as $rec)
{
$json_array['label']=$rec['user_type_detail'];
$json_array['value']=$rec['id'];
array_push($json_data,$json_array);
}
?>
我得到的JSON是:
[{"label":"Government Doctor","value":"8"},
{"label":"Private Doctor","value":"5"},
{"label":"Public Doctor","value":"6"},
{"label":"Student","value":"4"}
]
但问题是饼图没有显示在页面上。 它只是空白。
我正在使用id =“container”的div
这是我的脚本:
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
credits: {
enabled: false
},
exporting: { enabled: false } ,
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme &&
Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data:<?php echo json_encode($json_data) ?>
}]
});
</script>
您需要使用Highcharts所需的数据格式:
data: [{
"name": "Government Doctor",
"y": 8
},
{
"name": "Private Doctor",
"y": 5
},
{
"name": "Public Doctor",
"y": 6
},
{
"name": "Student",
"y": 4
}
]
现场演示: http : //jsfiddle.net/BlackLabel/ce72x3bu/
API参考: https : //api.highcharts.com/highcharts/series.pie.data
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.