如何使用Google图表API在X轴上使用日期？

Question

有没有办法用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一起使用的免费库也是受欢迎的.

Answer 1

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

我在ReHash数据库统计图表上做了这个(尽管日期结果是均匀分布的,所以它并没有完全证明它正在这样做).

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

现在,循环遍历您的数据.对于每个日期,我们希望日期从开始的整个期间的百分位数(即最早的日期是0,最新的日期是100).对于每个日期,首先要计算当前日期与数据集中最早日期的距离.基本上,"我们从一开始就有多远".因此,从当前日期减去最早的日期.然后,找到百分点,我们把当前日期的距离在整个时间段,再乘以100,并截断或圆形的任何小数给我们的整体的x坐标.

就这么简单!您的x值范围从0(图表的左侧)到100(右侧),每个数据点将位于距其真实时间距离的起点的距离处.

如果您有任何问题随时问!如果需要,我可以发布pesudocode或PHP.

Answer 2

我遇到了同样的问题,在谷歌图表上发现散点图,它确实是必要的.

这是我最终得到的代码(以他们为出发点):

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开始计算数月,即1月为0,2月为1,...,12月为11.

Answer 3

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

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