PHP+MySQL构建Google折线图：如何实现按月分组并显示月份名称

嘿，我来帮你搞定这个按月份分组显示Google折线图的需求！其实核心就是调整MySQL查询逻辑，再配合前端图表配置修改，我一步步给你讲清楚：

1. 先修改MySQL查询语句 #

原来的查询是按单日期取数据，现在要按月份分组求和，还要获取英文月份名称，同时得保证月份按自然顺序排列（不然会按字母排序，比如April跑到January前面）。你可以把查询改成这样：

SELECT 
    SUM(day_hours) AS hours,
    MONTHNAME(date) AS month_name, -- 获取英文月份名称（January、February等）
    MONTH(date) AS month_num       -- 用来排序，保证月份按1-12的顺序排列
FROM monthly_totals
-- 可选：添加日期过滤条件，比如只查2023年的数据：WHERE YEAR(date) = 2023
GROUP BY month_name, month_num
ORDER BY month_num ASC;

2. 调整PHP代码处理数据 #

接下来要把数据库返回的月份名称和对应小时数，整理成Google Charts需要的格式，再转成JSON传给前端：

<?php
$servername = "你的服务器地址";
$username = "数据库用户名";
$password = "数据库密码";
$dbname = "数据库名";

$conn = new mysqli($servername, $username, $password, $dbname);
if (!$conn) {
    die("Connection failed: ". mysqli_connect_error());
}

// 替换成上面修改后的查询语句
$query = "SELECT SUM(day_hours) AS hours, MONTHNAME(date) AS month_name, MONTH(date) AS month_num 
          FROM monthly_totals 
          -- 可选：添加日期过滤条件，比如 WHERE YEAR(date) = 2023
          GROUP BY month_name, month_num 
          ORDER BY month_num ASC";

$result = mysqli_query($conn, $query);

// 构建Google Charts需要的二维数组
$chartData = [];
$chartData[] = ['Month', 'Total Hours']; // 图表表头

while($row = mysqli_fetch_assoc($result)) {
    // 把月份名称和小时数加入数组，注意小时数要转成数值类型
    $chartData[] = [$row['month_name'], (float)$row['hours']];
}

// 转成JSON格式，传给前端JS
$chartJson = json_encode($chartData);
mysqli_close($conn);
?>

3. 优化前端JavaScript的图表配置 #

最后需要确保Google Charts的X轴正确显示月份名称，还可以优化标签显示避免重叠：

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    // 从PHP获取JSON数据，转成图表需要的DataTable
    var data = google.visualization.arrayToDataTable(<?php echo $chartJson; ?>);

    var options = {
        title: 'Monthly Total Working Hours',
        curveType: 'function',
        legend: { position: 'bottom' },
        hAxis: {
            title: 'Month',
            slantedText: true, // 倾斜X轴标签，避免名称太长重叠
            slantedTextAngle: 45, // 倾斜角度，按需调整
            textStyle: { fontSize: 12 }
        },
        vAxis: {
            title: 'Total Hours',
            minValue: 0 // 让Y轴从0开始，数据对比更直观
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

关键注意点 #

• 一定要用MONTH(date)来排序，不然分组后的月份会按字母顺序排列，完全不符合常理；
• 如果你的数据库日期字段是字符串类型（不是DATE/DATETIME），需要先转成日期类型再用MONTHNAME函数，比如MONTHNAME(STR_TO_DATE(date, '%Y-%m-%d'))；
• 可以通过WHERE条件过滤特定年份的数据，避免不同年份的同一个月份被合并（比如2023年1月和2024年1月会被当成同一个分组）。

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