Нарисуйте данные в графике, сгенерированной Chart JS

Question

Добрый день.Я работаю с Chart JS и пытаюсь показать существующее общее количество столбцов в столбчатой ​​диаграмме.

В бэкэнде я использую Laravel в качестве основы и данные, которые я передаю из контроллера через $datacount переменная.

Это мой запрос в контроллере:

$datacount = DB::table('topics')
            ->leftJoin('proposals_topics', 'topics.id', '=', 'proposals_topics.topic_id')
            ->select('topics.name as tpcname', 'proposals_topics.topic_id', \DB::raw('count(topic_id) as total'))
            ->groupBy('topics.name', 'proposals_topics.topic_id')
            ->orderBy('topic_id', 'desc')
            ->get();

Данные переменной, которую я получаю в этом скрипте:

<script>
   var datacount = <?= json_encode($datacount, JSON_PRETTY_PRINT); ?>;

   console.log(datacount);

   // Bar chart
   new Chart(document.getElementById("bar-chart"), {
       type: 'bar',
       data: {
       labels: ["Compras y Contrataciones", "Acceso a la Información", "Educación", "Organismos de Control", "Servicio Civil", "Infraestructura", "Energía", "Gestión Financiera", "Salud", "Agua"],
       datasets: [
           {
           label: "Cantidad generada",
           backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#ffc344","#ff8e17", "#ff4cd8","#ffea4c","#b7ff4c"],
           data: [datacount.total]
           }
       ]
       },
       options: {
       legend: { display: false },
       title: {
           display: true,
           text: 'Datos generados por eje temático.'
       }
       }
    });
</script>

Я получаюрезультаты в консоли, но я не могу показать данные массива.

Answer 1

Прочитав немного о документации Laravel и Javascript, я нашел решение для рисования данных на графике.

В скрипте я структурировал foreach на основе документации по циклам в https://laravel.com/docs/5.7/blade#if-statements.

<script>        
  //console.log(datacount);

  // Bar chart
  new Chart(document.getElementById("bar-chart"), {
      type: 'bar',
      data: {
      labels: [
          @foreach($datacount as $dt)
              "{{ $dt->tpname }}",
          @endforeach
      ],
      datasets: [
          {
          label: "Cantidad generada",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#ffc344","#ff8e17", "#ff4cd8","#ffea4c","#b7ff4c"],
              data: [
                  @foreach($datacount as $dt)
                      {!! $dt->total !!},
                  @endforeach
              ],
           }
      ]
      },
      options: {
      legend: { display: false },
      title: {
          display: true,
          text: 'Ejes temáticos por cantidad de propuestas.'
      }
      }
    });
</script>

Также смотрите некоторые примеры по адресу: https://quickadminpanel.com/pages/reports-generator-module

Answer 2

Вы можете поместить данные из вашего PHP-скрипта в поля данных с помощью: