40

有没有办法使用 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 图表的免费解决方案或可与 ASP.NET 一起使用的免费库。

4

5 回答 5

20

更新现在使用高级图表“注释图表”功能直接在图表 API 中支持 - https://developers.google.com/chart/interactive/docs/gallery/annotationchart

我已经在我的ReHash 数据库统计图表上做到了这一点（即使日期被证明是均匀分布的，所以它并不能完全证明它正在这样做）。

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

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

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

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

于 2009-06-19T21:44:09.367 回答
11

我遇到了同样的问题，在 Google Charts 上找到了散点图，它确实是必要的。

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

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。

于 2011-10-30T19:36:02.300 回答
8

看起来您现在可以使用高级图表执行此操作：

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

于 2010-04-12T20:03:57.993 回答
1

这可以很容易地用谷歌图表完成，但你的应用程序必须计算标签

chxl chart x label 参数是您需要的参数。以下示例用 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
于 2009-06-19T21:32:15.177 回答
0

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

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

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

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

于 2010-10-23T09:59:42.973 回答