![](/img/trans.png)
[英]Highchart (pie chart) with data from HTML table not displaying legend
[英]Highchart not displaying the pie chart with Ajax data
我正在尝试将 highcharts 图表与 rest API 集成。 当我对chartObj
的series
属性内的data
值进行硬编码时,我看到了图表,但是当我尝试与 API 集成并将data
值填充到series
,图表没有显示。 你能告诉我我哪里出错了吗?
注意:我已经用有效的硬编码值注释了data
代码。
var chartObj = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
backgroundColor:null
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
title:{
text: 'Storage Data'
},
series:[{
type: 'pie',
name: 'Storage Data',
/*data: [
['HP', 80.0],
['DELL', 20.0]
]*/
}]
}
var storageData = $.getJSON('http://hostname/resturl/data',
function(data) {
var result = new Array();
for (i=0;i<data.content.length;i++) {
var alpha = new Array();
alpha.push(data.content[i].x);
alpha.push(data.content[i].y);
result.push(alpha);
}
storageobj.series.data=result;
});
$('#pie-chart2').highcharts(storageobj);
添加json数据:
{
"links": [],
"content": [
{
"x": "POWEREDGE R610",
"y": 238
},
{
"x": "POWEREDGE R810",
"y": 229
}
],
"id": null
}
从控制台添加回调和相关错误的代码:
var restUrl='http://hostname:port/url/of/rest?callback=?';
var getData = $.getJSON(restUrl,
function(data) {
console.log('came her');
var result = new Array();
for (i=0;i<data.content.length;i++) {
var alpha = new Array();
alpha.push(data.content[i].x);
alpha.push(data.content[i].y);
result.push(alpha);
}
storageobj.series.data=result;
});
控制台没有打印“来到这里”并在控制台上抛出以下错误: Uncaught SyntaxError: Unexpected token : {"links":[],"content":[{"x":"HP","y":238},{"x":"DELL","y":229}],"id":null}
请让我知道我哪里出错了。
问题是您在收到 AJAX 响应之前创建图表。
在回调中创建图表,请参阅:
$.getJSON(
'http://hostname/resturl/data',
function (data) {
var result = new Array();
for (i = 0; i < data.content.length; i++) {
var alpha = new Array();
alpha.push(data.content[i].x);
alpha.push(data.content[i].y);
result.push(alpha);
}
chartObj.series[0].data = result;
$('#pie-chart2').highcharts(chartObj);
}
);
此外,使用chartObj
来创建图表,而不是从getJSON()
方法返回的值。
为您的 ajax 请求指定回调函数。
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {
}
在您的网址中附加“callback=?” 看例子
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.