Question

我想用json数据构建mutipal饼图。并将饼图放在类容器中，例如：

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");
                }
        }); 





});

Answer 1

每个图表都需要容器上的唯一ID。看起来你用最后一个图表覆盖了那些容器。尝试在每个容器div上使用不同的id。例如：

projectList +="<div id='pie-chart-container-" + i + "' class='container'>pie</div>"

如何基于json数据显示多个动态高级图表

1 个答案: