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'和'name都是相关的，所以循环本身就很好。问题是我无法弄清楚如何制作许多饼图，就像我现在想做的那样。我不太确定我在这里做错了什么，但最后显示的是一张饼图。

Answer 1

您需要为avery图表生成新的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>

我可以动态制作c3js图吗？

1 个答案: