用Google直方图创建日期直方图

如何创建使用日期的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年了,直方图仍然不支持日期。因为我没有时间,而且我需要把我的东西做完,我做了一个变通办法(太难看了,疼得要命),但还是奏效了。

首先,我定义了一个格式,以便在每个标签的开头放置一个关键字。在我的示例中,因为我的页面中只有一个图表,所以我只使用了关键字"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,只需将#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);

请谨慎使用此答案。使用查询选择器修改第三方生成的内容非常不安全,因为它依赖于希望第三方开发人员不要修改内容的生成方式。

相关文章