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 回答