You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何修改Google Charts时间轴图表的日期格式为dd/mm?

问题

我使用Google Charts制作了时间轴图表,已完成适配,但图表日期标签始终是mm/dd格式。虽然成功将日期语言改为葡萄牙语,却无法切换为dd/mm格式。尝试配置hAxis选项无效,afterDraw函数用于将日期标签移至图表顶部并移除最后一个元素,更换浏览器后问题依旧。当前代码如下:

$(document).ready(function(){
        google.charts.load("current", {packages:["timeline"],'language': 'pt'});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {


            var jsonData = $.ajax({
                url : 'Agenda/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', function(){
            
                afterDraw();

            });



            var options ={
              timeline: { showRowLabels: false},
              alternatingRowStyle: true,
              hAxis: {
                format: 'dd.MM',
                viewWindowMode: 'pretty' // 确保显示每日网格
                },
              tooltip: {
                isHtml: true
              }
            };

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


    });

    // 将日期标签移至图表顶部
    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+')');

        var lastDateElement = g.querySelector("text:last-child");
        if (lastDateElement) {
          lastDateElement.remove();
        }

        g = null;


    }
解决方案

核心问题是你定义了配置选项但未传递给chart.draw方法,导致hAxis的日期格式配置完全没有生效。按以下步骤修改:

  1. 整合配置对象:把width、height参数合并到之前定义的options里,确保所有配置都能被图表读取
  2. 调整hAxis.format为你需要的dd/mm格式(用'dd/MM')

修改后的关键代码片段:

var options ={
  timeline: { showRowLabels: false},
  alternatingRowStyle: true,
  hAxis: {
    format: 'dd/MM', // 设置为dd/mm格式
    viewWindowMode: 'pretty' // 确保显示每日网格
  },
  tooltip: {
    isHtml: true
  },
  width: '100%',
  height: 10000
};

// 将整合后的options传给draw方法
chart.draw(dataTable, options);

额外检查点:

  • 确认后端返回的DataTable数据中,日期列的类型是date或datetime,如果是字符串类型,Google Charts无法正确解析和格式化,需要调整数据类型。

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.01 16:32:44