我想使用json数据构建多个饼图。并将饼图放入类容器中，例如:
data.data[0].usedPercentage=0,
data.data[1].usedPercentage=20,
data.data[2].usedPercentage=0,
输出饼图应显示为 0%, 20%, 0% ， 但现在他们显示相同的全部为 0%，有人能提供一些线索吗？非常感谢
$.ajax({
type: "GET",
url: 'http://XXX.XXX.XXX.XX',
dataType:'json',
contentType:"application/json",
success:function(data){
console.log(data);
var used = new Array();
for (var i = 0; i < data.data.length; i++) {
used[i]=data.data[i].usedPercentage;
pieIndex(used[i]);
projectList +="<div class='container'>pie</div>"
function pieIndex(used){
$(function () {
// Using classes to select multiple containers
var $containers = $(".container");
// You just set the configuration object once
var chartConfig = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'precentage',
colorByPoint: true,
data: [{
name: 'Unused',
y: 100-Number(used),
color: '#eeeeee',
sliced: true,
selected: true
}, {
name: 'Used',
y: Number(used),
color: '#f34s12',
selected: true
}]
}]
};
$containers.each(function() {
$(this).highcharts(chartConfig);
});
});
}
},
error:function(){
alert("connection error");
}
});
});
最佳答案
每个图表在容器上都需要一个唯一的 ID。看起来您正在用最后一个图表覆盖这些容器。尝试在每个容器 div 上使用不同的 id。例如:
projectList +="<div id='pie-chart-container-" + i + "' class='container'>pie</div>"
关于javascript - 如何基于json数据显示多个动态highcharts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44773028/