javascript - 如何在 Laravel 中使用带有 JSON 数据的 Chartjs 显示图表

Question

我已经使用以下查询和结果从 mysql 数据创建 JSON:

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 文件中的 <script>:

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); ?>
    }
    ] 

有关更多信息，您可以查看此工作示例链接:How to display chart using Chartjs with JSON data in Laravel