jsonデータに基づいて動的なハイチャートを表示する方法

Question

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





}); 

Answer 1

各グラフには、コンテナに一意のIDが必要です。これらのコンテナを最後のグラフで上書きしているようです。各コンテナdivに異なるIDを使用してみてください。例：

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