如何从Laravel/PHP解析数据至Google Charts Timeline

没问题！我来帮你把Laravel中的数据集转换成Google Charts Timeline所需的dataRows格式，分后端数据准备和前端图表渲染两步来实现：

1. 后端（Laravel控制器）：准备并传递格式化后的数据 #

首先假设你有一个对应日程/活动的模型（比如Schedule），包含room（会议室名称）、name（活动名称）、start_time（开始时间）、end_time（结束时间）这些字段。

在控制器中查询数据，并将日期格式转换为Google Charts能识别的结构（注意Google的Date对象月份是从0开始的，所以要减1）：

use App\Models\Schedule;
use Carbon\Carbon;

public function timeline()
{
    // 查询需要展示的日程数据
    $schedules = Schedule::all(['room', 'name', 'start_time', 'end_time']);
    
    // 格式化数据，将日期转成包含年、月（减1）、日、时、分、秒的数组
    $timelineData = $schedules->map(function ($schedule) {
        $start = Carbon::parse($schedule->start_time);
        $end = Carbon::parse($schedule->end_time);
        
        return [
            $schedule->room,
            $schedule->name,
            // 转成Google Date需要的参数：[年, 月(0-11), 日, 时, 分, 秒]
            [$start->year, $start->month - 1, $start->day, $start->hour, $start->minute, $start->second],
            [$end->year, $end->month - 1, $end->day, $end->hour, $end->minute, $end->second]
        ];
    })->toArray();
    
    // 将数据传递到视图
    return view('timeline', compact('timelineData'));
}

2. 前端：接收数据并生成Timeline的DataRows #

在Laravel视图中，把后端传递的timelineData变量转换成JavaScript数组，然后循环添加到Google Charts的DataTable中：

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

function drawChart() {
    var container = document.getElementById('example5.3');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    
    // 定义列（和你原来的静态代码一致）
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    
    // 从Laravel传递过来的数据生成dataRows
    var timelineData = {!! json_encode($timelineData) !!};
    timelineData.forEach(function(row) {
        // 将数组转成Google Date对象
        var startDate = new Date(...row[2]);
        var endDate = new Date(...row[3]);
        // 添加行到DataTable
        dataTable.addRow([row[0], row[1], startDate, endDate]);
    });
    
    // 图表配置（和你原来的一致）
    var options = {
        timeline: { colorByRowLabel: true },
        backgroundColor: '#ffd'
    };
    
    chart.draw(dataTable, options);
}
</script>
<div id="example5.3" style="height: 150px;"></div>

关键说明 #

• 用Carbon处理日期是为了确保月份正确转换（Google Date的月份是0索引，比如1月对应0，12月对应11）
• 后端把日期转成数组格式，前端用扩展运算符...可以快速创建Date对象
• 如果你的日期字段是时间戳格式，也可以直接在前端用new Date(timestamp)创建对象，这样后端处理会更简单

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