我可以动态制作 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名字现在叫names。 '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>

我可以动态制作 c3js 图表吗？

Can I dynamically make c3js graphs?

javascript

php

loops

c3.js