Показать много статистических графиков с диаграммой

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>
}?>

Мое первое впечатление - это "id", который он содержит при вызове javascript, но я хочу знать, что может быть возможным решением.

Answer 1

Да, идентификатор является одной проблемой с этим кодом.Каждый раз, когда цикл запускается

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

ctx ссылается на один и тот же элемент в DOM, поэтому он заменяет все, что было ранее.Одним из решений было бы динамическое создание идентификатора на основе индекса итерации цикла, то есть chart-area-0, chart-area-1 и т. Д.

Другая проблема заключается в том, как 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.