我是Highcharts和json的新用户，我正在使用带有渐变填充的饼图。过去几天我一直面临着从外部文件中获取json数据以使用库填充带有渐变填充的饼图的问题。虽然我无法找到特定的解决方案，但我已经尝试过StackOverflow和Google搜索的所有建议。
在我的控制台中，我的json数据显示为
[{"name":{"MOZILA":45.0}},{"name":{"IE":26.8}},{"name":{"CHROME":12.8}},{"name":{"OPERA":6.2}},{"name":{"OTHERS":9.2}}]
这是我的AJAX调用（我省略了不相关的数据）
$(function () {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
$.getJSON("pie.php", function(json) {
// call createChart passing the data to be used
options.series[0].data = json;
createChart(json);
});
});
}
function createChart(chartData) {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ' Rate of a specific project'
},
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'
},
connectorColor: 'silver'
}
}
},
series: [{
type: 'pie',
name: 'Total without cost',
data: chartData
}]
});
}
这是我的 pie.php ：
$sql="SELECT mozila,ie,chrome,opera,safari,torch FROM webmarketing";
$resultSql = mysql_query($sql);
$result = array();
while($rows=mysql_fetch_array($resultSql)) {
$result[] = array('name' => 'MOZILA', 'y' => $rows['mozila']);
$result[] = array('name' => 'IE', 'y' => $rows['ie']);
$result[] = array('name' => 'CHROME', 'y' => $rows['chrome']);
$result[] = array('name' => 'OPERA', 'y' => $rows['opera']);
$result[] = array('name' => 'OTHERS', 'y' => $rows['safari']+$rows['torch']);
}
print json_encode($result, JSON_NUMERIC_CHECK);
数据显示在控制台上，但图形不会显示在浏览器上。
答案 0 :(得分：0)
您需要follow up the documentation并查看图表所期望的内容，在您的示例中，您使用的是饼图，并且他们有此演示：
首先，您的输出代码甚至不是浏览器名称的有效JSON，因为它们是一个字符串，需要用双引号"包裹
正如您所看到的，他们期望您提供的内容多一点，而且数据格式错误，需要从PHP脚本输出的正确内容应该是：
[
[ "Firefox", 45.0 ],
[ "IE", 26.8 ],
[ "Chrome", 12.8 ],
[ "OPERA", 6.2 ],
[ "OTHERS", 9.2 ]
]
或者，通过指定单个值（ JSON格式）
[
{ "name": "Firefox", "y": 45.0 },
{ "name": "IE", "y": 26.8 },
{ "name": "Chrome", "y": 12.8 },
{ "name": "OPERA", "y": 6.2 },
{ "name": "OTHERS", "y": 9.2 }
]
或者您需要在javascript中再次解析它...
在你的json电话中，你正在做：var chart = new Highcharts.Chart(options);
来自他们的文档，应该是
$('#container').highcharts(options);
根据您的更改：
我会提取您的图表代码并将其添加到方法中，例如：
$(function () {
// START Radialize the colors
Highcharts.getOptions().colors =
Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// END Radialize the colors
$.getJSON("pie.php", function(json) {
// call createChart passing the data to be used
createChart(json);
});
});
function createChart(chartData) {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
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: [{
type: 'pie',
name: 'Browser share',
data: chartData
}]
});
}
但是您需要输出图表所期望的正确JSON格式（请参阅上面的答案，以便了解您需要输出的内容。
你输出：
[{"name":{"MOZILA":45.0}},{"name":{"IE":26.8}},{"name":{"CHROME":12.8}},{"name":{"OPERA":6.2}},{"name":{"OTHERS":9.2}}]
你需要这个：
[{ "name":"MOZILA","y":45.0},{"name":"IE","y":26.8},{"name":"CHROME","y":12.8},{"name":"OPERA","y":6.2},{"name":"OTHERS","y":9.2}]
答案 1 :(得分：0)
请尝试以下示例，可以帮助您 我使用过JQuery而不是AJAX
Sql Syntex
CREATE TABLE IF NOT EXISTS `sales` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`month` varchar(200) DEFAULT NULL,
`amount` varchar(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=118 ;
INSERT INTO `sales` (`id`, `month`, `amount`) VALUES
(24, 'Apr', '15'),
(25, 'May', '40'),
(26, 'Jun', '26'),
(27, 'Jul', '31'),
(28, 'Aug', '39'),
(29, 'Sep', '25'),
(30, 'Oct', '27'),
(31, 'Nov', ' 32'),
(32, 'Dec', NULL);
<强>的index.php
<head>
<meta name="Gopal Joshi" content="Highchart with Mysql" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Highchart with Mysql Database</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/setup.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<script src="js/highcharts.js"></script>
<div id="sales" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
<强> setup.js
它将从另一页面创建图表和导入数据。
var chart;
$(document).ready(function() {
var cursan = {
chart: {
renderTo: 'sales',
defaultSeriesType: 'area',
marginRight: 10,
marginBottom: 20
},
title: {
text: 'Highchart With Mysql',
},
subtitle: {
text: 'www.spjoshis.blogspot.com',
},
xAxis: {
categories: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar']
},
yAxis: {
title: {
text: 'Average'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
crosshairs: true,
shared: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 30,
borderWidth: 0
},
plotOptions: {
series: {
cursor: 'pointer',
marker: {
lineWidth: 1
}
}
},
series: [{
color: Highcharts.getOptions().colors[2],
name: 'Test Colomn',
marker: {
fillColor: '#FFFFFF',
lineWidth: 3,
lineColor: null // inherit from series
},
dataLabels: {
enabled: true,
rotation: 0,
color: '#666666',
align: 'top',
x: -10,
y: -10,
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 0px black'
}
}
}],
}
//Fetch MySql Records
jQuery.get('js/data.php', null, function(tsv) {
var lines = [];
traffic = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i, line) {
line = line.split(/\t/);
date = line[0] ;
amo=parseFloat(line[1].replace(',', ''));
if (isNaN(amo)) {
amo = null;
}
traffic.push([
date,
amo
]);
});
} catch (e) { }
cursan.series[0].data = traffic;
chart = new Highcharts.Chart(cursan);
});
});
<强> data.php
$con=mysql_connect('localhost','root','');
mysql_select_db("test", $con);
$result=mysql_query('select * from sales order by id');
while($row = mysql_fetch_array($result)) {
echo $row['month'] . "\t" . $row['amount']. "\n";
}
Click Here阅读更多内容或下载示例