Laravel生成饼图异常：仅返回JSON数据无法渲染饼图求助

问题描述 #

使用Laravel后端返回图表数据，但前端无法渲染饼图，直接显示JSON内容，需获取正确的JavaScript查询方法并解决渲染问题。

现有代码 #

视图代码（存在问题） #

<script>
  // get data from database using Ajax or fetch
  fetch('/api/data')
    .then(response => {
        let data = response.data;

        let ctx = document.getElementById('myChart').getContext('2d');
        let myChart = new Chart(ctx, {
            type: 'pie',
            data: data
        });
    })
    .catch(error => {
        console.log(error);
    });
</script>

控制器代码 #

$data = DB::table('suara')
    ->groupBy('suara')
    ->pluck(DB::raw('sum(jml_suara) as sum'), 'suara')
    ->toarray();

// format data for pie chart
$labels = [];
$values = [];
foreach ($data as $item => $key) {
    $labels[] = $item;
    $values[] = $key;
}

return response()->json([
    'labels' => $labels,
    'datasets' => [
        [
            'data' => $values,
            'backgroundColor' => ['#FF6384', '#36A2EB', '#FFCE56', '#F44336']
        ]
    ]
]);

问题原因及解决步骤 #

• Fetch API 处理错误：Fetch返回的response是Response对象，不能直接读取response.data，必须先调用response.json()解析JSON数据。
• 缺少依赖与容器：前端未引入Chart.js库，也没有指定ID的canvas容器，导致无法渲染图表。
• 路由访问错误：直接访问/api/data路由只会返回JSON，需访问加载视图的web路由（如/chart），再由视图发起AJAX请求获取数据。

修正后的完整代码 #

视图代码（完整版） #

<!-- 引入Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- 饼图容器 -->
<canvas id="myChart" width="400" height="400"></canvas>

<script>
  fetch('/api/data')
    .then(response => {
        // 先解析JSON数据
        return response.json();
    })
    .then(data => {
        // 获取canvas上下文
        const ctx = document.getElementById('myChart').getContext('2d');
        // 初始化饼图
        new Chart(ctx, {
            type: 'pie',
            data: data
        });
    })
    .catch(error => {
        console.error('获取数据失败:', error);
    });
</script>

路由配置 #

// web路由（routes/web.php）：加载图表视图
Route::get('/chart', function () {
    return view('chart'); // 对应resources/views/chart.blade.php视图文件
});

// API路由（routes/api.php）：返回图表数据
Route::get('/data', [YourController::class, 'getData']); // 替换为你的控制器和方法名

控制器代码（优化版） #

$data = DB::table('suara')
    ->groupBy('suara')
    ->select('suara', DB::raw('sum(jml_suara) as sum'))
    ->get();

return response()->json([
    'labels' => $data->pluck('suara')->toArray(),
    'datasets' => [
        [
            'data' => $data->pluck('sum')->toArray(),
            'backgroundColor' => ['#FF6384', '#36A2EB', '#FFCE56', '#F44336']
        ]
    ]
]);

验证步骤 #

1. 访问/chart路由（而非/api/data）
2. 打开浏览器控制台，检查是否有报错信息
3. 确认API请求返回格式正确的JSON数据

内容的提问来源于stack exchange，提问作者HUDA