使用谷歌直方图创建日期直方图

Posted 2023-02-19

【中文标题】使用谷歌直方图创建日期直方图

【英文标题】：Create date histogram chart with google histogram

【发布时间】：2014-02-15 03:50:03

【问题描述】：

如何创建适用于日期的 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);

【问题讨论】：

直方图尚不支持日期。您可以提交feature request 以添加支持。

添加了功能请求code.google.com/p/google-visualization-api-issues/issues/…。有什么方法可以模拟支持吗？可以将日期转换为数字，但如何修复标签和轴？

您可以通过设置日期列的格式化值来修复标签，但无法调整直方图中的轴标签。

近 2 年后，直方图仍不支持日期jsfiddle.net/paul_h/Qquse/1569

只是添加另一个评论... 4 年后，直方图仍然不支持日期^_^

【参考方案1】：

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 为“chart”的 DIV 中。如果您使用任何其他 id，只需将 #chart 替换为您的 id；

然后我将只过滤以我的关键字“日期”开头的标签

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);

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

【参考方案2】：

试试这个柱形图：

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'],
    ,
;

【讨论】：

直方图和柱形图是不同类型的图表，虽然非常相似。在某些情况下，柱形图无法很好地替换直方图。例如，就我而言，我正在使用 Google Charts 的仪表板控件来制作交互式图表。将柱形图进行动态化以用作直方图将是太多的工作。