Как отобразить диаграмму, используя Chartjs с данными JSON в Laravel

Question

Я создал JSON из данных MySQL с запросом и результатом ниже:

SELECT
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 1 THEN 1 ELSE 0 END ) ) AS `Januari`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 2 THEN 1 ELSE 0 END ) ) AS `Pebruari`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 3 THEN 1 ELSE 0 END ) ) AS `Maret`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 4 THEN 1 ELSE 0 END ) ) AS `April`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 5 THEN 1 ELSE 0 END ) ) AS `Mei`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 6 THEN 1 ELSE 0 END ) ) AS `Juni`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 7 THEN 1 ELSE 0 END ) ) AS `Juli`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 8 THEN 1 ELSE 0 END ) ) AS `Agustus`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 9 THEN 1 ELSE 0 END ) ) AS `September`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 10 THEN 1 ELSE 0 END ) ) AS `Oktober`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 11 THEN 1 ELSE 0 END ) ) AS `November`,
    sum( ( CASE MONTH ( `posts`.`created_at` ) WHEN 12 THEN 1 ELSE 0 END ) ) AS `Desember`,
    sum( ( CASE YEAR ( `posts`.`created_at` ) WHEN YEAR ( now( ) ) THEN 1 ELSE 0 END ) ) AS `TOTAL` 
FROM
    `posts` 
WHERE
    ( YEAR ( `posts`.`created_at` ) = YEAR ( now( ) ) )

и JSON приводят к laravel {{route ('chart.all')}}, показывающему это:

[{"Januari":0,"Pebruari":0,"Maret":0,"April":0,"Mei":0,"Juni":0,"Juli":0,"Agustus":11,"September":0,"Oktober":0,"November":0,"Desember":0,"TOTAL":0}]

И , который я положил в php файл:

var data = '{{ route('chart.all') }}'

const CHART = document.getElementById('charts');
var lineChart = new Chart(CHART, {
   type: 'bar',
   data: {
      labels: Object.keys(data),
      datasets: [{
         label: 'My first dataset',
         fill: false,
         lineTension: 0,
         data: Object.values(data)
      }]
   }
})

Когда я запускаю этот скрипт, данные показывают другой результат, что-то не так с моим скриптом выше?

Answer 1

Вы можете ниже рабочий пример, и вы можете использовать данные запроса mysql в данных chartjs как:

    datasets: [
    {
    label: 'this year',
    backgroundColor: '#26B99A',
    borderWidth: 1,
    data: <?php echo json_encode($Data); ?>
    }
    ] 

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