Question

下午好，我在一个网站上工作，因此需要创建一些视觉统计数据，因此我开始使用图表。问题在于，一旦加载数据，我需要显示许多相同类型的统计信息，因此我使用了一个简单的foreach遍历数组，但是仅显示一次并加载了最新数据。

<?php foreach ($datos as $d){
<div id="canvas-holder" style="width:100%">
          <canvas id="chart-area"></canvas>
        </div>
        <script>
          var config = {
            type: 'doughnut',
            data: {
              datasets: [{
                data:[
                  <?php foreach ($estadistica1 as $s){
                    echo $s['p'];?>,<?php echo $s['s'];?>,<?php echo $s['f'];}?>],

                backgroundColor: [
                  "rgba(15,255,0)",
                  "rgba(255,243,0)",
                  "rgba(255,0,0)",
                ],
                label: 'Dataset 1'
              }],
              labels: ['dato1', 'dato2', 'dato3'],
            },
            options: {
            }
          };

          window.onload = function() {
            var ctx = document.getElementById('chart-area').getContext('2d');
            window.myPie = new Chart(ctx, config);
          };

          var colorNames = Object.keys(window.chartColors);
          document.getElementById('addDataset').addEventListener('click', function() {
            var newDataset = {
              backgroundColor: [],
              data: [],
              label: 'New dataset ' + config.data.datasets.length,
            };

            config.data.datasets.push(newDataset);
            window.myPie.update();
          });

        </script>
}?>

给我的第一印象是调用javascript时所包含的“ id”，但我想知道什么是可能的解决方案。

Answer 1

是的，id是此代码的一个问题。每次循环运行

var ctx = document.getElementById('chart-area').getContext('2d');

ctx指的是DOM中的相同元素，因此它将替换以前的内容。一种解决方案是根据循环迭代的索引（即chart-area-0，chart-area-1等）动态生成ID。

另一个问题是PHP和Javascript混合在一起的方式。这使得阅读和理解代码中发生的事情变得不必要地困难。例如，我看不到使用$d。看起来您正在尝试遍历$datos和$estadistica1的两个值。那是故意的吗？

如果必须从PHP获取值，我建议这样做一次，并允许Javascript处理这些值的循环以创建图表。

您可以像这样将PHP值放入Javascript对象中：

<script>
  var datos = <?php echo json_encode($datos); ?>;
  var estadistica1 = <?php echo json_encode($estadistica1); ?>;
</script>

然后在代码中，您可以在纯Javascript中使用这些值。像这样：

<div id="canvas-holder" style="width: 100%"></div>

<script>
  var datos = <?php echo json_encode($datos); ?>;
  var estadistica1 = <?php echo json_encode($estadistica1); ?>;
  var config = [];

  // create an array of config objects, one for each chart
  // your original code doesn't use d, so it's unclear what it does
  datos.forEach(function(d) {
    var data = [];
    estadistica1.forEach(function(s) {
      data.push([s.p, s.s, s.f]);
    });

    var thisConfig = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: data,
          backgroundColor: [
            "rgba(15,255,0)",
            "rgba(255,243,0)",
            "rgba(255,0,0)",
          ],
          label: 'Dataset 1'
        }],
        labels: ['dato1', 'dato2', 'dato3'],
      },
      options: {
      }
    };
    config.push(thisConfig);
  });

  window.onload = function() {
    var canvasContainer = document.getElementById("canvas-holder");
    config.forEach(function(thisConfig, index) {
      var thisCanvas = document.createElement("canvas");
      var thisId = "chart-area-" + index;
      thisCanvas.setAttribute("id", thisId);
      canvasContainer.appendChild(thisCanvas);
      var thisCtx = document.getElementById(thisId).getContext('2d');
      new Chart(thisCtx, thisConfig);
  });
</script>

我已经省略了addEventListener代码，因为它看起来是不完整的，并且不清楚它的目的是什么。

由于我无权访问您的PHP值，因此我未测试此代码。

用图表显示许多统计图

1 个答案: