如何在Laravel Blade视图中基于Shopify数据动态填充Google柱状图？

问题解决：Laravel结合Shopify REST API实现Google柱状图展示当月每日销量 #

1. 控制器端数据处理优化

你当前的代码仅生成了日期数组和总销量，未按日期匹配对应销量，这是图表为空的核心原因。需要完成以下步骤：

• 生成当月完整日期数组
• 通过Shopify API获取按日期分组的每日销量
• 将日期与对应销量关联，形成图表所需的二维数据结构

修改后的控制器代码：

// 生成当月日期数组（Laravel自带Carbon简化写法）
$year = 2022;
$month = 12;
$startDate = Carbon::create($year, $month, 1);
$endDate = $startDate->copy()->endOfMonth();

$dates = [];
for ($date = $startDate; $date->lte($endDate); $date->addDay()) {
    $dates[] = $date->format('Y-m-d');
}

// 调用Shopify REST API获取当月订单（需替换为你的实际API调用逻辑）
$shopifyOrders = // 示例：ShopifyOrders::whereMonth('created_at', $month)->whereYear('created_at', $year)->get();

// 初始化每日销量为0
$dailySales = array_fill_keys($dates, 0);

// 遍历订单，按日期累加销量
foreach ($shopifyOrders as $order) {
    $orderDate = Carbon::parse($order['created_at'])->format('Y-m-d');
    if (isset($dailySales[$orderDate])) {
        $dailySales[$orderDate]++;
    }
}

// 组装图表所需的二维数组（包含表头和数据行）
$chartData = [["Date", "Sales", "style"]];
foreach ($dates as $date) {
    $chartData[] = [$date, $dailySales[$date], "#b87333"];
}

// 传递数据到Blade视图
return view('your-view-path', compact('chartData'));

2. Blade视图中正确渲染Google Charts

当前视图代码仅传递了单条数据，且未正确解析PHP数组为JS数组，导致图表无数据。修改后的视图代码：

<!-- 图表容器 -->
<div id="columnchart_values" style="width: 600px; height: 200px;"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        // 将PHP数组安全转换为JS可识别的数组
        var chartData = {!! json_encode($chartData) !!};
        
        // 初始化图表数据
        var data = google.visualization.arrayToDataTable(chartData);
              
        // 配置数据视图（添加销量标注）
        var view = new google.visualization.DataView(data);
        view.setColumns([
            0, 
            1, 
            {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"}, 
            2
        ]);
              
        // 图表配置项
        var options = {
            title: "当月每日销量统计",
            width: 600,
            height: 200,
            bar: {groupWidth: "95%"},
            legend: { position: "none" },
            hAxis: { title: "日期" },
            vAxis: { title: "销量", minValue: 0 }
        };
        
        // 渲染柱状图
        var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
        chart.draw(view, options);
    }
</script>

关键修正说明

• 控制器端：必须将日期与对应销量一一匹配，生成包含表头的完整二维数组，确保每个日期都有对应的销量值（包括销量为0的日期）
• 视图端：使用{!! json_encode($chartData) !!}将PHP数组直接转为JS数组，避免手动拼接字符串导致的语法错误
• 图表配置：添加坐标轴标签、设置Y轴最小值为0，提升图表可读性和准确性

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