Javascript 用谷歌直方图创建日期直方图
如何创建与日期相关的谷歌直方图[1] 我将示例代码(包括工作编号和非工作日期示例)和代码放在下面[2] [1] [2]Javascript 用谷歌直方图创建日期直方图,javascript,google-visualization,histogram,Javascript,Google Visualization,Histogram,如何创建与日期相关的谷歌直方图[1] 我将示例代码(包括工作编号和非工作日期示例)和代码放在下面[2] [1] [2] 现在已经5年了,直方图仍然不支持日期。因为我没有时间,我需要完成我的工作,所以我做了一个变通办法(很难看很痛),但效果不错 首先,我定义了一种格式,只在每个标签的开头放一个关键字。在我的例子中,因为我的页面中只有一个图表,所以我只使用了关键字“date” const keyword = 'date'; const options = { // ... h
现在已经5年了,直方图仍然不支持日期。因为我没有时间,我需要完成我的工作,所以我做了一个变通办法(很难看很痛),但效果不错 首先,我定义了一种格式,只在每个标签的开头放一个关键字。在我的例子中,因为我的页面中只有一个图表,所以我只使用了关键字“date”
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,只需用您的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);
请谨慎使用此答案。使用查询选择器修改第三方生成的内容是非常不安全的,因为它依赖于希望第三方开发人员不会修改生成内容的方式。尝试此柱状图:
public histogramChart: GoogleChartInterface = {
chartType: 'ColumnChart',
dataTable: [
['Date', 'Number'],
[new Date(2015, 1, 1), 5],
[new Date(2015, 1, 2), 5.1],
[new Date(2015, 1, 3), 6.2],
[new Date(2015, 1, 4), 7]
];,
//opt_firstRowIsData: true,
options: {
title: 'Shooting history',
legend: { position: 'none' },
colors: ['#4285F4'],
},
};
直方图尚不支持日期。您可以提交以添加支持。已添加功能请求。有没有办法模仿支持?无法将日期转换为数字,但如何修复标签和轴?您可以通过设置日期列的格式值来修复标签,但无法调整柱状图中的轴标签。近2年后,柱状图仍然不支持日期,只是为了添加另一条注释。。。4年以上之后,柱状图仍然不支持日期。柱状图和柱状图是不同类型的图表,尽管非常相似。在某些情况下,柱状图很难取代柱状图。例如,在我的例子中,我使用谷歌图表的仪表板控件制作交互式图表。将柱状图改为柱状图太麻烦了。
public histogramChart: GoogleChartInterface = {
chartType: 'ColumnChart',
dataTable: [
['Date', 'Number'],
[new Date(2015, 1, 1), 5],
[new Date(2015, 1, 2), 5.1],
[new Date(2015, 1, 3), 6.2],
[new Date(2015, 1, 4), 7]
];,
//opt_firstRowIsData: true,
options: {
title: 'Shooting history',
legend: { position: 'none' },
colors: ['#4285F4'],
},
};