我可以動態製作c3js圖嗎？

Question

這是我走到這一步：

<div id="chart"></div> 
    <script> 
     var names = <?php echo json_encode($array1) ?>; 
     var count = <?php echo json_encode($array2) ?>; 
     var x=0; 
     while (names[x]!=null) 
     { 
      var chart = c3.generate({ 
       padding: { 
        top: 0, 
        right: 50, 
        bottom: 0, 
        left: 10, 
       }, 
       data: { 
        columns: [ 
         ['a1', count[x][0]], 
         ['b2', count[x][1]], 
         ['c3', count[x][2]], 
         ['d4', count[x][3]] 
        ], 
        type: 'pie' 
       }, 

      }); 
      x=x+1; 
     } 
     chart.resize({height:200, width:300}) 
    </script> 

所以我現在從數據庫中提取數據，並存儲在一個PHP數組我的數據。然後我將它們json到js，現在它的js名稱被稱爲名稱。 'count'和'names是相關的，所以循環本身很好。問題是，我無法弄清楚如何製作很多很多的餅圖，因爲我現在正在嘗試做。我不確定我在這裏做錯了什麼，但最終顯示的只是一張餅圖。

Answer 1

你需要生成艾利圖新的DOM元素，所以在當你可以這樣做：

<script> 
 
    var names = <? php echo json_encode($array1) ?> ; 
 
var count = <? php echo json_encode($array2) ?> ; 
 
var x = 0; 
 
while (names[x] != null) { 
 
    var iDiv = document.createElement('div'); 
 
    iDiv.id = 'chart' + x; 
 
    document.getElementById('chartsHolder')[0].appendChild(iDiv); 
 

 
    var chart = c3.generate({ 
 
    bindto = "#chart" + x; 
 
    padding: { 
 
     top: 0, 
 
     right: 50, 
 
     bottom: 0, 
 
     left: 10, 
 
     }, 
 
     data: { 
 
     columns: [ 
 
      ['a1', count[x][0]], 
 
      ['b2', count[x][1]], 
 
      ['c3', count[x][2]], 
 
      ['d4', count[x][3]] 
 
     ], 
 
     type: 'pie' 
 
     }, 
 

 
    }); 
 
    x = x + 1; 
 
} 
 
chart.resize({ 
 
    height: 200, 
 
    width: 300 
 
}) < /script>

<div id="chartsHolder"></div>