Javascript 如何在Google图表API中使用X轴中的日期？

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

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

chxl chart x label参数就是您需要的参数。以下示例在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

更新现在，图表API使用高级图表“带注释的图表”功能直接支持此功能-

我已经在我的图表上做了这件事（尽管日期的间隔是均匀的，所以它不能确切地证明它正在做这件事）

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

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

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

---

如果您有任何问题，请随时提问！如果需要，我可以发布pesudocode或PHP。

看起来您现在可以通过高级图形来实现这一点：

---

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

1） 根据格式（周一/周二、周一/周二、1月1日/2月1日、1月1日、2月1日、2月29日、14/2/2010等），计算每个日期中的字符数，然后计算图表宽度中可以容纳的标签数（可能会变得粗糙，涉及像素的字符宽度（对于固定字体更容易），或者只是一些尝试和错误）

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

---

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

我也遇到了同样的问题，在谷歌图表上可以找到，它完全满足了需要

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

---

请注意，它们似乎从0开始计算月份，即1月是0，2月是1，…，12月是11。

他不是问标签，而是问数据是否位于相对于整个时间范围内日期各自位置的x轴位置。好的。但是数据点1（16/1）、2（26/1）和3（6/2）在输出图表中以相同的距离分开，不是很难吗？前2个和后2个之间有10天的时间间隔？完全是达斯汀，这就是我的意思。要知道我在做什么，就要根据需要多次重复上一个日期值，直到有新的日期可用为止。这样我就有了一个固定数量的数据点（例如30个）和许多重复的值。这是有意义的…甚至比我正在做的更好，而且听起来很容易实现…谢谢！！！效果不错。问题是如何确保正确的x标签。我有一组左偏的数据点，我想用比例来表示。如果我只是将整个范围除以5，那么x标签将与实际数据点不对应。在您的回答中，“ReHash Database Statistics”链接已失效。

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}
              );
}