如何创建与日期一起使用的Google直方图图[1]?
我已经放置了示例代码(带有工作号码和非工作日期示例):http://jsfiddle.net/qquse/417/和下面的代码[2]
[1] https://developers.google.com/chart/interactive/docs/gallery/histogram
[2]
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function str_to_utcdate(d) {
return new Date(d.substr(0, 4), d.substr(5, 2) - 1, d.substr(9, 2));
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['item', 'date'],
['a', str_to_utcdate('2001-07-01')],
['b', str_to_utcdate('2001-07-01')],
['c', str_to_utcdate('2001-07-01')], ]);
var chart = new google.visualization.Histogram(document.getElementById('chart_div1'));
chart.draw(data);
var data = google.visualization.arrayToDataTable([
['item', 'date'],
['a', 10],
['b', 20],
['c', 30], ]);
var chart = new google.visualization.Histogram(document.getElementById('chart_div2'));
chart.draw(data);
}
现在5年,直方图仍然不支持日期。由于我没有时间,我需要完成我的工作,所以我做了一个解决方法(很难看它很痛苦),但是有效。
首先,我定义了一种格式,只是为了在每个标签的开始时放置一个关键字。就我而言,由于我的页面中只有一个图表,所以我只使用了"日期"。
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"图表"的DIV中。如果您使用任何其他ID,只需将#chart
替换为您的ID;
然后,我将仅过滤以我的关键字" date"''
开始的标签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'],
},
};