Laravel中使用Chart.js绘制饼图不加载但标签显示的问题

你之前用Chart.js在Laravel里搞定了柱状图，现在做饼图却卡壳了——标签能显示，但饼图就是加载不出来，我看了你的代码，问题主要出在数据格式不符合Chart.js饼图的要求，咱们来一步步修正：

第一步：先明确饼图需要的数据结构 #

Chart.js的饼图要求的是「标签数组」和「对应的数值数组」，两者是一一对应的关系，比如标签是["张三","李四"]，数值就是[2,3]，这样才能生成两个分片，分别代表2个张三和3个李四。

而你之前的控制器返回的是所有用户的name和email，视图里直接把两个数组套在一起塞给饼图，这肯定解析不了。

第二步：调整控制器，返回聚合后的统计数据 #

假设你想统计每个房东用户的数量（如果你的需求是其他维度，比如按邮箱后缀统计，逻辑类似），修改控制器代码：

public function chart() {
    $result = \DB::table('users')
        ->where('userType','=','Landlord')
        ->select('name', \DB::raw('count(*) as total')) // 按name分组统计数量
        ->groupBy('name')
        ->orderBy('created_at', 'ASC')
        ->get();
    return response()->json($result);
}

这样返回的是每个名字对应的用户总数，正好适合饼图展示。

第三步：修正视图的JS代码，适配饼图格式 #

把你原来的JS代码改成下面这样，重点是把数据拆成一维的标签数组和数值数组：

<script>
var url = "{{url('/users')}}";
var chartLabels = [];
var chartData = [];

$(document).ready(function(){
    $.get(url, function(response){
        // 遍历接口返回的数据，拆分标签和数值
        response.forEach(function(data){
            chartLabels.push(data.name);
            chartData.push(data.total);
        });

        var ctx = document.getElementById("canvas").getContext('2d');
        var myPieChart = new Chart(ctx, {
            type: 'pie',
            data : {
                labels: chartLabels, // 一维标签数组
                datasets: [{
                    label: '房东用户数量统计',
                    data: chartData, // 一维数值数组，和标签一一对应
                    // 自定义分片颜色，可选但建议加上，避免默认颜色问题
                    backgroundColor: [
                        '#FF6384',
                        '#36A2EB',
                        '#FFCE56',
                        '#4BC0C0',
                        '#9966FF'
                    ],
                    hoverOffset: 4 // 鼠标悬停时的偏移效果
                }]
            }
        });
    });
});
</script>

为什么原来的代码不行？ #

• 你之前把[Name, Email]这种二维数组传给labels和data，Chart.js饼图无法识别这种结构，它需要的是单个字符串组成的标签数组，和单个数字组成的数值数组。
• 另外，饼图的数据集里最好指定backgroundColor，不然可能因为默认颜色加载问题导致看不到饼图。

最后别忘了确认你的视图里有对应的canvas元素：

<canvas id="canvas" width="400" height="400"></canvas>

现在刷新页面，应该就能看到正常加载的饼图啦！

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