如何将数据库数据存入数组并生成柱状图？解决仅显示单条数据问题

我第一次制作柱状图，尝试把数据库中的数据展示为柱状图，但现在只能显示最后一条数据（Encyclopedia），希望能展示全部数据。我觉得问题出在控制器代码里，请问需要修改/添加哪些内容？

数据库表结构 #

当前控制器代码 #

public function barChart(){

    $data = product::all();

    foreach($data as $data){
        $prod_name = [$data->title];
        $prod_sold = [$data->sold];
    }

    return view('bar-chart',compact('prod_name','prod_sold'));
}

当前Blade视图代码 #

<script src="https://cdnjs.com/libraries/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

<div class="map_canvas">
  
           <canvas id="myChart" width="auto" height="100"></canvas>
</div>

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: <?php echo json_encode($prod_name) ?>,
        datasets: [{
            label: '',
            data: <?php echo json_encode($prod_sold); ?>,
            backgroundColor: [
                'rgba(31, 58, 147, 1)',
                'rgba(37, 116, 169, 1)',
                'rgba(92, 151, 191, 1)',
                'rgb(200, 247, 197)',
                'rgb(77, 175, 124)',
                'rgb(30, 130, 76)'
            ],
            borderColor: [
                'rgba(31, 58, 147, 1)',
                'rgba(37, 116, 169, 1)',
                'rgba(92, 151, 191, 1)',
                'rgb(200, 247, 197)',
                'rgb(77, 175, 124)',
                'rgb(30, 130, 76)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                max: 200,
                min: 0,
                ticks: {
                    stepSize: 50
                }
            }
        },
        plugins: {
            title: {
                display: false,
                text: 'Custom Chart Title'
            },
            legend: {
                display: false,
            }
        }
    }
});
</script>

问题原因与修改方案 #

问题根源 #

控制器循环逻辑错误：每次循环都重新创建仅包含当前元素的数组（$prod_name = [$data->title];），而非将元素追加到数组中，循环结束后数组自然只剩最后一条数据。同时循环变量与集合变量同名（$data），会导致集合被覆盖，属于潜在bug。

修改后的控制器代码 #

方式一：初始化数组后循环追加

public function barChart(){
    $products = Product::all(); // 避免变量名重复
    $prod_name = [];
    $prod_sold = [];

    foreach($products as $product){
        $prod_name[] = $product->title; // 向数组追加元素
        $prod_sold[] = $product->sold;
    }

    return view('bar-chart', compact('prod_name','prod_sold'));
}

方式二：使用Eloquent的pluck方法（更简洁）

直接从集合提取指定字段，无需手动循环：

public function barChart(){
    $prod_name = Product::pluck('title')->toArray();
    $prod_sold = Product::pluck('sold')->toArray();

    return view('bar-chart', compact('prod_name','prod_sold'));
}

可选视图优化 #

• 给label设置有意义的名称，比如label: '销量'，提升可读性
• 若后续sold值超过200，可动态设置y轴最大值（比如在控制器计算最大值后传递到视图，或在JS中处理）

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