如何使用在X轴日期与谷歌图表API?(How to use dates in X-axis with

2019-07-29 00:45发布

有没有一种方法来绘制与谷歌图表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做,但我怎么能计算并与谷歌的图表显示呢?

类似于谷歌图表或免费的图书馆等免费的解决方案,可与ASP.NET使用也欢迎。

Answer 1:

UPDATE采用了先进的图形这是现在直接支持图表API中的“图表注释”功能- https://developers.google.com/chart/interactive/docs/gallery/annotationchart

我已经这样做了我的翻版数据库统计图表(即使日期竟然是均匀分布的,所以它不正是证明了它这样做)。

首先,你希望得到您的整个时间段 ,这将是类似于图表的整体宽度。 要做到这一点,我们减去了最新的最早日期。 我更喜欢使用Unix的纪元时间戳,因为它们是整数,且易以这种方式来比较,但你可以很容易地计算出的秒数等

现在,通过你的数据循环。 对于每一天,我们希望在整个周期的日期是从一开始的百分位数 (即最早日期为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开始计数个月,即一月是0,二月是1,...,十二月为11。



Answer 3:

它看起来像你现在可以使用高级图形做到这一点:

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



Answer 4:

这与谷歌的图表做很容易,但是你的应用程序必须计算标签

该chxl图表X标签的参数是一个你需要的。 下面的示例标签y轴在50步数,并与日期底部

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


Answer 5:

海。 我沿着相同的路线,你的思维。 我可以预见到的问题,其中标签相互覆盖,并能想到的只有两种方法。

1)计算出有多少个字符中的每个日期,,取决于格式(MON /周二,周一/周二,1月1日/ 2月1日,1月1日,2月29日,14/2/2010 ..等)然后计算多少标签你能适应在您的图表的宽度(这可能会粗糙,涉及焦炭像素宽度(便于固定字体),或者只是少数审判和错误)。

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

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



文章来源: How to use dates in X-axis with Google chart API?