五年过去了,直方图仍然不支持日期。由于我没有时间,而且我需要完成我的工作,所以我做了一个解决方法(太丑了,很痛苦),但有效。
首先,我定义了一种格式,只是将关键字放在每个标签的开头。就我而言,由于我的页面中只有一张图表,因此我只使用了关键字“日期”。
const keyword = 'date';
const options = {
// ...
hAxis: {
format: `'${keyword}'#`
},
}
如果页面中有多个图表并且希望它们表现不同,则可能需要为每个图表定义不同的关键字。
现在,使用查询选择器,我选择了我感兴趣的所有标签元素
let labels = Array.from(document.querySelectorAll('#chart svg g:nth-of-type(3) g:nth-of-type(3) g text'));
就我而言,我的图表设置在 ID 为“chart”的 DIV 中。如果您使用任何其他 ID,只需替换#chart
与您的身份证件;
然后我将仅过滤以关键字“日期”开头的标签
labels = labels.filter(g => g.innerHTML.startsWith(keyword));
这样,我替换了innerHTML
每个元素的日期格式我想要的。
labels.forEach(g => {
const date = new Date(+g.substring(keyword.length));
// you can apply any format method you wish
// .toLocaleDateString()
g.innerHTML = date.toLocaleDateString();
// moment.js
g.innerHTML = moment(date).format('DD/MM/YYYY HH:MM');
});
另外,我使用交互式图表,因此标签会在每次用户交互时刷新。因此,我将所有内容放在一个区间内,最终结果如下:
const keyword = 'date';
const options = {
// ...
hAxis: {
format: `'${keyword}'#`
},
}
// ... chart setup
setInterval(() => {
let labels = Array.from(document.querySelectorAll('#chart svg g:nth-of-type(3) g:nth-of-type(3) g text'));
labels = labels.filter(g => g.innerHTML.startsWith(keyword));
labels.forEach(g => {
const date = new Date(+g.substring(keyword.length));
g.innerHTML = date.toLocaleDateString();
});
}, 100);
谨慎使用这个答案。使用查询选择器修改第三方生成的内容是非常不安全的,因为它依赖于第三方开发人员不会修改内容生成方式的希望。