Javascript 来自Ajax响应的数据可以';不能在海图中加载
我有来自阵列中ajax响应的数据,如下所示:Javascript 来自Ajax响应的数据可以';不能在海图中加载,javascript,jquery,ajax,highcharts,Javascript,Jquery,Ajax,Highcharts,我有来自阵列中ajax响应的数据,如下所示: "attd": [ { "y": 1, "name": "Attendance", "sliced": true, "selected": true }, { "y": 1, "name": "SPJ in town", "sliced": true, "selected": true } ] 我想将此结果传递到highchart,以下是我的代码: success: f
"attd": [
{
"y": 1,
"name": "Attendance",
"sliced": true,
"selected": true
},
{
"y": 1,
"name": "SPJ in town",
"sliced": true,
"selected": true
}
]
我想将此结果传递到highchart,以下是我的代码:
success: function(rs) {
var attdChart = $(".attdChart");
attdChart.unbind();
var jsonData = JSON.parse(rs);
if (jsonData.success) {
var data = jsonData.attd;
var data_array = [];
$.each(data, function(key, value){
data_array.push(value);
});
$('#containerPiechart').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
height: 200,
marginRight: 60
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
}
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 0
},
series: data_array
});
}
成功:功能(rs){
var attdChart=$(“.attdChart”);
attdChart.unbind();
var jsonData=JSON.parse(rs);
if(jsonData.success){
var data=jsonData.attd;
var数据_数组=[];
$。每个(数据、函数(键、值){
数据_array.push(值);
});
$(“#containerPiechart”)。高图({
图表:{
plotBackgroundColor:null,
plotBorderWidth:null,
影子:错,
键入“pie”,
身高:200,
marginRight:60
},
标题:{
文本:“”
},
工具提示:{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项:{
馅饼:{
allowPointSelect:true,
光标:“指针”,
数据标签:{
启用:false,
格式:“{point.name}:{point.percentage:.1f}%”,
风格:{
颜色:(Highcharts.theme&&Highcharts.theme.ContractTextColor)| |“黑色”
}
},
showInLegend:对
}
},
图例:{
对齐:“右”,
垂直排列:“顶部”,
布局:“垂直”,
x:0,,
y:0
},
系列:数据单元阵列
});
}
我尝试使用console.log
,结果如下:
它显示了结果。我假设
系列:数据数组中的错误是因为我在其中给出硬代码时,图表显示出来的。
但原因是:系列:数据数组
,没有图表显示。请帮帮我…这是我如何做的饼图示例代码
var options1={
chart:{
renderTo: 'pie_chart',
type: 'pie',
options3d:{
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Title'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Time Fixed',
},
labels: {
overflow: 'justify'
},
tooltip:{
formatter: function() {
return this.series.name +': '+ this.y;
}
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true
},
showInLegend: true
},
series: {
animation:{ duration: 1000}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 50,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: []
}
// chart = new Highcharts.Chart(options1);
$.getJSON("your_ajax_call_file.php", function(json){
$.each(json, function(key, value) {
var series = {}; // <-------------------- moved and changed to object
series.name = key;
series.data = value;
options1.series.push(series); // <-------- pushing series object
});
var chart = new Highcharts.Chart(options1);
});
var选项1={
图表:{
renderTo:“饼图”,
键入“pie”,
选项3D:{
启用:对,
阿尔法:45,
贝塔:0
}
},
标题:{
文本:“标题”
},
xAxis:{
类别:[]
},
亚克斯:{
标题:{
文本:“固定时间”,
},
标签:{
溢出:'justify'
},
工具提示:{
格式化程序:函数(){
返回this.series.name+':'+this.y;
}
}
},
打印选项:{
馅饼:{
allowPointSelect:true,
光标:“指针”,
深度:35,
数据标签:{
已启用:true
},
showInLegend:对
},
系列:{
动画:{持续时间:1000}
}
},
图例:{
布局:“垂直”,
对齐:“右”,
垂直排列:“顶部”,
x:-10,
y:50,
浮动:是的,
边框宽度:1,
背景颜色:((Highcharts.theme&&Highcharts.theme.legendBackgroundColor)| |'#FFFFFF'),
影子:对
},
学分:{
已启用:false
},
系列:[]
}
//图表=新的高点图表。图表(选项1);
$.getJSON(“您的_ajax_call_file.php”,函数(json){
$.each(json、函数(键、值){
var系列={};//请共享文本而不是图像
!控制台怎么说?任何错误
?控制台日志中没有错误,它只显示您可以共享的结果?@NikeYulistiaAngreni请将下面的答案标记为已接受或提供更多信息,因为问题应该得到解决。在图表的选项系列
中,对象是一个带有序列作为对象,应该是属性data
作为数组。因此series
选项中的单个序列可能看起来像series:[{data:[{y:1},{y:2}]
。