javascript - 如何用foreach时间制作图表

Question

我正在尝试用我的数据库时间制作一个图表，但我无法让图表“读取”我的数据。

我用 Laravel 和 ChartJS 尝试了这个。我用这种方式制作其他图表，我的问题只是用日期时间和时间制作图表。

  <script type="text/javascript">
  new Chart(document.getElementById("bar-chart"), {
      type: 'bar',
      data: {
        labels: [
          @foreach ($ambientes as $key => $value)
            '{{ $value->mes }}',
          @endforeach
        ],
        datasets: [
          {
            label: "Tiempo de indisponibilidad",
            backgroundColor: "red",
            data: [
              @foreach ($ambientes as $key => $value)
                '{{ $value->tiempo }}',
              @endforeach
            ]
          }
        ]
      },
      options: {
        scales: {
            yAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        quarter: 'h:mm'
                    }
                }
            }]
        },
      }
  });
    </script>

Answer 1

首先声明两个数组用于标签和数据并将值插入数组

/*Declare array*/
@php $label=array(); $data=array(); @endphp
/*push label and values into array*/
@foreach($ambientes as $key => $value) 
    @php
        array_push($label, $value->mes);
        array_push($data, $ot['dayot']);
     @endphp
@endforeach

然后对脚本中的值进行 json_encode

<script type="text/javascript">
new Chart(document.getElementById("bar-chart"), {
    type: 'bar',
    data: {
    labels: [<?php echo json_encode($label);?>],
    datasets: [
      {
        label: "Tiempo de indisponibilidad",
        backgroundColor: "red",
        data: [<?php echo json_encode($data);?>]
      }
    ]
    },
    options: {
    scales: {
        yAxes: [{
            type: 'time',
            time: {
                displayFormats: {
                    quarter: 'h:mm'
                }
            }
        }]
    },
    }
});
</script>