如何解决为每个Json对象创建饼图
我有一个Json具有多个数组和foreach数组,我想创建饼图,但是我不知道该怎么做。
这是我的array。这就是我尝试过的:
function Pie() {
$.getJSON("/Admin/Attivita/OreOggi",function (data) {
console.log(data);
var oreTecico = [];
var oreTecico = [];
var oreMalatia = [];
var oreStraordinario = [];
var oreInfortunio = [];
var oreFerie = [];
for (var i = 0; i < data.length; i++) {
nomeTecnico.push(data[i].nome);
oreTecico.push(data[i].odinario);
oreMalatia.push(data[i].malatia);
oreStraordinario.push(data[i].straordinario);
oreInfortunio.push(data[i].infortunio);
oreFerie.push(data[i].ferie);
};
// Build the chart
Highcharts.chart('zdravko',{
chart: {
plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,type: 'pie'
},title: {
text: 'Ore segnate oggi'
},tooltip: {
pointFormat: '<b>{point.name}</b>: {point.y:.1f} h.'
},accessibility: {
point: {
valueSuffix: '%'
}
},plotOptions: {
pie: {
allowPointSelect: true,cursor: 'pointer',dataLabels: {
enabled: false
},showInLegend: true
}
},series: [{
name: nomeTecnico[0],colorByPoint: true,data: [{
name: '',y:0,sliced: true,selected: true
},{
name: 'Odinario',y: oreTecico[0]
},{
name: 'Malatia',y: oreMalatia[0]
},{
name: 'Straordinario',y: oreStraordinario[0]
},{
name: 'Infortunio',y: oreInfortunio[0]
},{
name: 'Ferie',y: oreFerie[0]
}]
}]
});
});
}
它仅显示最后的“数据”。我想使每个数组一个饼。如果我有100个数组,我想要100个饼。
更新:
我添加了这个:
data.forEach(function (el) {
var chartData = [el.data1,el.data2];
var chartContainer = document.createElement('div');
document.getElementById('zdravko').append(chartContainer);
Highcharts.chart(chartContainer,{
series: [{
type: 'pie',data: chartData
}]
});
});
chartData
是array的未定义对象。
是否可以在Highcharts中制作for
或foreach
?
解决方法
您需要循环使用Highcharts.chart
方法,例如:
var data = [{
data1: 12,data2: 25
},{
data1: 67,data2: 11
}];
data.forEach(function(el) {
var chartData = [el.data1,el.data2];
var chartContainer = document.createElement('div');
document.getElementById('container').append(chartContainer);
Highcharts.chart(chartContainer,{
series: [{
type: 'pie',data: chartData
}]
});
});
实时演示: http://jsfiddle.net/BlackLabel/x95pbw7j/
API参考: https://api.highcharts.com/class-reference/Highcharts#.chart
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。