如何通过 Google 图表 API 使用 X 轴中的日期？

Posted 2023-02-22

【中文标题】如何通过 Google 图表 API 使用 X 轴中的日期？

【英文标题】：How to use dates in X-axis with Google chart API?

【发布时间】：2010-11-04 10:31:59

【问题描述】：

有没有办法使用 Google 图表 API 绘制图表，以便 X 轴值是一个月中的天数？

我有不同频率提供的数据点。例如：

Date - Value
1/1/2009 - 100
1/5/2009 - 150
1/6/2009 - 165
1/13/2009 - 200
1/20/2009 - 350
1/30/2009 - 500

我想制作一个图表，将每个数据点与基于一个月内的时间的相对距离分开。这可以用 Excel 来完成，但是如何用 Google 图表计算和显示呢？

也欢迎其他类似于 Google 图表的免费解决方案或可与 ASP.NET 一起使用的免费库。

【参考方案1】：

更新 现在，Chart API 使用高级图形“带注释的图表”功能直接支持这一点 - https://developers.google.com/chart/interactive/docs/gallery/annotationchart

我已经在我的 ReHash Database Statistics 图表上完成了这项工作（即使日期被证明是均匀分布的，所以它并不能完全证明它正在这样做）。

首先，您希望获得总时间段，这类似于图表的总宽度。为此，我们从最晚的日期中减去最早的日期。我更喜欢使用 Unix-epoch 时间戳，因为它们是整数并且易于以这种方式进行比较，但您可以轻松计算秒数等。

现在，遍历您的数据。对于每个日期，我们希望整个期间的 percentile 日期是从一开始的（即最早的日期是 0，最晚的日期是 100）。对于每个日期，您首先要计算当前日期与数据集中最早日期的距离。本质上，“我们离一开始还有多远”。因此，从当前日期中减去最早的日期。然后，为了找到百分位数，我们将 当前日期的距离除以 总时间段，然后乘以 100 并截断或四舍五入任何小数，得到我们的积分x 坐标。

就这么简单！您的 x 值范围从 0（图表左侧）到 100（右侧），并且每个数据点都位于与其真实时间距离相对应的起点。

如果您有任何问题，请随时提问！如果需要，我可以发布伪代码或 php。

【讨论】：

有道理...甚至比我做的更好，而且听起来很容易实现...谢谢！！！

效果很好。问题是如何确保正确的 x-labels。我有一组左偏的数据点，我希望用比例来表示它。如果我只是将整个范围除以五，则 x-label 将不对应于实际数据点。

在您的回答中“ReHash 数据库统计”链接已失效。

【参考方案2】：

我遇到了同样的问题，在 Google Charts 上找到了 scatter plots，它完全符合需要。

这是我最终得到的代码（以他们的作为起点）：

function drawVisualization() 
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Quantity');
    data.addRow([new Date(2011, 0, 1), 10])
    data.addRow([new Date(2011, 1, 1), 15])
    data.addRow([new Date(2011, 3, 1), 40])
    data.addRow([new Date(2011, 6, 1), 50])


    // Create and draw the visualization.
    var chart = new google.visualization.ScatterChart(
        document.getElementById('visualization'));
    chart.draw(data, title: 'Test',
                      width: 600, height: 400,
                      vAxis: title: "cr", titleTextStyle: color: "green",
                      hAxis: title: "time", titleTextStyle: color: "green",
                      lineWidth: 1
              );

请注意，它们似乎从 0 开始计算月份，即一月是 0，二月是 1，...，十二月是 11。

【参考方案3】：

看起来您现在可以使用高级图表来做到这一点：

http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html

【参考方案4】：

这可以通过 Google 图表轻松完成，但您的应用程序必须计算标签

chxl 图表 x 标签参数是您需要的参数。以下示例用 50 步的数字标记 y 轴，并用日期标记底部

chxl=0:|0|50|100|150|200|250|300|350|400|450|500|1:|16/01/2009|26/01/2009|6/02/2009

【讨论】：

他不是在询问标签，而是在询问让数据位于相对于日期在整个时间范围内的相应位置的 x 轴位置。

好的。但是数据点 1 (16/1)、2(26/1) 和 3(6/2) 在输出图表中是否会以相同的距离分开，即使前 2 和 12 之间有 10 天也是如此最后 2 个？

正是达斯汀，这就是我的意思。知道我在做什么是根据需要多次重复以前的日期值，直到有新的日期可用。这样我就有了固定数量的数据点（例如 30 个）和许多重复的值。

【参考方案5】：

喂。我的想法和你一样。我可以预见标签相互覆盖的问题，并且只能想到两种方法。

1) 根据格式（周一/周二、周一/周二、1 月 1 日/2 月 1 日、1 月 1 日、2 月 29 日、2010 年 2 月 14 日等）计算出每个日期中有多少个字符，然后计算您可以在图表宽度上放置多少标签（可能会变得粗糙，涉及以像素为单位的字符宽度（对于固定字体更容易），或者只是一些试验和错误）。

当然，您的标签可能会直接与任何数据对齐。

2) 使用多个 X 轴标签并垂直放置日期。