Google Charts：如何将横轴日期格式自定义为仅显示年份

问题原因 #

你设置的hAxis.format: 'yyyy'不生效，核心原因是横轴数据被识别为字符串类型，而非Google Charts可解析的日期/时间类型。字符串格式的时间戳无法被hAxis.format规则处理，因此会原样显示完整时间。

解决步骤 #

1. 修正DataTable的横轴数据类型 #

在arrayToDataTable的表头定义中，明确将第一列指定为datetime类型，替换默认的字符串类型：

[{type: 'datetime', label: 'Year'}, {type: 'number', label: 'Highest Annual Observed Tide'}, ...]

2. 将MySQL时间戳转换为Google Charts兼容的日期格式 #

在PHP循环输出数据时，把Timestamp字段转换为Google Charts能识别的日期构造格式。这里选择提取年份构造当年1月1日的方式，保证横轴按年份正确分组：

$timestamp = strtotime($row['Timestamp']);
$year = date('Y', $timestamp);
echo "[new Date($year, 0, 1),".$row['Highest Annual Observed Tide'].",".$row['Highest Astronomical Tide'].",".$row['Highest Annual Predicted Tide'].",".$row['Observed High Tides > HAT']."],";

3. 保留hAxis的format配置 #

原有的hAxis: {title: 'Year', format: 'yyyy'}配置可以保留，现在数据为日期类型，该规则会正常生效。

修正后的完整代码 #

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        // 明确第一列为datetime类型
        [{type: 'datetime', label: 'Year'}, {type: 'number', label: 'Highest Annual Observed Tide'}, {type: 'number', label: 'Highest Astronomical Tide'},{type: 'number', label: 'Highest Annual Predicted Tide'},{type: 'number', label: 'Number of High Tides >= HAT'}],
        <?php
        $con = mysqli_connect('localhost','sealevel_Temp','Stackoverflow','sealevel_NZ');
        $query = "SELECT * FROM `Tides` WHERE Location = 'Auckland'";
        $exec = mysqli_query($con,$query);
        while($row = mysqli_fetch_array($exec)){
            $timestamp = strtotime($row['Timestamp']);
            $year = date('Y', $timestamp);
            echo "[new Date($year, 0, 1),".$row['Highest Annual Observed Tide'].",".$row['Highest Astronomical Tide'].",".$row['Highest Annual Predicted Tide'].",".$row['Observed High Tides > HAT']."],";
        }
        ?>
    ]);
    
    var formatMSL = new google.visualization.NumberFormat({pattern: '# mm'});
    formatMSL.format(data, 1);
    formatMSL.format(data, 2);
    formatMSL.format(data, 3);

    var options = {
        fontSize: '20',
        title: 'Auckland Extreme Tides Summary', 
        titleTextStyle: {fontSize: 20, fontName: 'Arial', color: 'Black', bold:'True'},
        hAxis: {title: 'Year', format: 'yyyy'},
        height: 600,
        chartArea: {height: '75%', width: '80%', left: 100, right: 100},
        legend: {position: 'top', alignment: 'start', textStyle: {fontSize: 8, fontName: 'Helvetica'}, maxLines: 5},
        colors: ['blue'],
        tooltip: {isHtml: true},
        series: {
            0: {targetAxisIndex: 0, color:'blue'},
            1: {targetAxisIndex: 0, color:'gray'},
            2: {targetAxisIndex: 0, color:'#0099C6'},
            3: {targetAxisIndex: 1, color:'navy'},
        },
        vAxes: {
            0: {title: 'Height above Chart Datum (mm)', viewWindow:{min: 3500, max: 4150}, format:'###0'},
            1: {title: 'Number of Observed High Tides > HAT', viewWindow: {min: 0, max: 2}},
        },  
        theme: 'material'
    };
    var chart = new google.visualization.LineChart(document.getElementById("AucklandChart_div"));
    chart.draw(data,options);
}
</script>

<body>
 <div id="AucklandChart_div"></div>
</body>

额外说明 #

如果数据是按年度汇总的，也可以直接在PHP中提取年份作为字符串输出，但需要将hAxis.type设置为'category'，让横轴作为离散类别处理。不过推荐使用日期类型的方式，图表会自动处理时间轴的间隔和排序逻辑。

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