我正在尝试从 MYSQL 查询呈现 Highcharts 。 JSON 看起来正确，页面加载没有任何错误，但不会渲染 Highcharts 。
我的代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function () {
var chart;
var myJson =
[{"Buch":"0528713FHVR ","Anzahl":3},{"Buch":"0657222FHVR","Anzahl":2},{"Buch":"A10055035","Anzahl":2},{"Buch":"0657223FHVR","Anzahl":1},{"Buch":"062729XFHVR","Anzahl":1}]
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'My PIE chart'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: []
};
var seriesNew = {
type: 'pie',
name: 'Some series name',
data: []
};
myJson = $.parseJSON(myJson);
jQuery.each(myJson, function (itemNo, item) {
seriesNew.data.push({
x: item.Buch,
y: item.Anzahl
})
});
options.series.push(seriesNew);
chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
我没有包含 SQL 查询，因为我觉得 JSON 的格式很好(我使用了 JSON_Encode)。
但我不知道为什么它不会渲染。
最佳答案
您已经有一个 JSON，不需要使用 jQuery 解析它，因此删除该行: myJson = $.parseJSON(myJson); 并且应该可以工作。请参阅:http://jsfiddle.net/H4LS9/
编辑:
要获取第一个值作为切片名称，请使用点作为数组:http://jsfiddle.net/H4LS9/1/
seriesNew.data.push([
item.Buch,
item.Anzahl
])
关于php - 将 JSON 数据导出到 Highchart(饼图)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17190178/