如何修改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的日期格式配置完全没有生效。按以下步骤修改:
- 整合配置对象:把width、height参数合并到之前定义的
options里,确保所有配置都能被图表读取 - 调整
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
相关产品推荐
相关产品推荐

