Google Charts Timeline图表强制显示日期而非小时的问题

问题背景 #

我使用Google Charts的Timeline图表，从数据库获取数据渲染，核心代码如下：

图表初始化代码 #

google.charts.load("current", {packages:["timeline"],'language': 'pt'});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var jsonData = $.ajax({
        url : 'Consulta/getDados',
        dataType : 'json',
        async: false
    }).responseText;

    var container = document.getElementById('chart');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable(jsonData);
    google.visualization.events.addListener(chart, 'ready', afterDraw);

    var options ={
      timeline: { showRowLabels: false},
      alternatingRowStyle: true,
       hAxis: {
        format: 'dd.MM.yyyy',
        }
    };

    chart.draw(dataTable,
        {
            width: '100%',
            height: 1000
        });
}

X轴位置调整代码 #

function afterDraw() {
    var g = document.getElementsByTagName("svg")[0].getElementsByTagName("g")[1];
    document.getElementsByTagName("svg")[0].parentNode.style.top = '45px';
    document.getElementsByTagName("svg")[0].style.overflow = 'visible';
    var height = Number(g.getElementsByTagName("text")[0].getAttribute('y')) + 20;
    g.setAttribute('transform','translate(0,-'+height+')');
    g = null;
}

问题描述 #

当筛选的时间范围少于6天时，X轴不再显示dd.MM.yyyy的日期格式，转而显示小时。尝试过ticks和hAxis相关属性调整，但未解决问题，需要实现无论时间范围长短，X轴都仅显示日期。

核心修复点 #

1. 你之前的chart.draw方法没有传入配置好的options对象，而是传了新的独立配置，导致hAxis.format完全未生效，这是关键问题之一。
2. 通过手动生成时间范围内的所有日期作为ticks，强制Google Charts使用指定的日期刻度，避免自动切换到小时格式。

修改后的完整代码 #

google.charts.load("current", {packages:["timeline"],'language': 'pt'});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var jsonData = $.ajax({
        url : 'Consulta/getDados',
        dataType : 'json',
        async: false
    }).responseText;

    var container = document.getElementById('chart');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable(jsonData);
    google.visualization.events.addListener(chart, 'ready', afterDraw);

    // 提取数据中的时间范围（根据你的DataTable结构调整列索引）
    // Timeline默认结构：[组名, 项名, 开始日期, 结束日期]，所以开始日期是列2，结束日期是列3
    var startRange = dataTable.getColumnRange(2);
    var endRange = dataTable.getColumnRange(3);
    var startDate = new Date(Math.min(startRange.min.getTime(), endRange.min.getTime()));
    var endDate = new Date(Math.max(startRange.max.getTime(), endRange.max.getTime()));

    // 生成时间范围内的所有日期作为刻度
    var ticks = [];
    var currentDate = new Date(startDate);
    while (currentDate <= endDate) {
        ticks.push(new Date(currentDate));
        currentDate.setDate(currentDate.getDate() + 1);
    }

    var options ={
      timeline: { showRowLabels: false},
      alternatingRowStyle: true,
      width: '100%',
      height: 1000,
      hAxis: {
        format: 'dd.MM.yyyy',
        ticks: ticks // 强制使用手动生成的日期刻度
      }
    };

    // 传入完整的options配置
    chart.draw(dataTable, options);
}

注意事项 #

• 确认getColumnRange的列索引与你的DataTable结构匹配，若日期列位置不同，需对应调整数字。
• 手动生成ticks时，会覆盖Google Charts的自动刻度逻辑，确保时间范围内的所有日期都会被显示为X轴刻度。

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