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

5 回答

• 10

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

  我已经在我的ReHash数据库统计图表上做了这个（即使日期结果是均匀分布的，所以它没有't exactly demonstrate that it'这样做） .

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

  现在，循环遍历您的数据 . 对于每个日期，我们希望日期从开始的整个周期中的百分位数（即，最早的日期是0，最新的日期是100） . 对于每个日期，首先要从数据集中的最早日期计算 distance of the present date . 基本上，"how far are we from the start" . 因此，从当前日期减去最早的日期 . 然后，为了找到百分位数，我们将 distance of the present date 除以 overall time period ，然后乘以100并截断或舍入任何小数以给出我们的积分 x-coordinate .

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

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

  回复于 2024-04-30T18:56:39+08:00
• 0

  我遇到了同样的问题，在Google Charts上找到scatter plots，它确实是必要的 .

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

  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 .

  回复于 2024-04-30T18:56:39+08:00
• 8

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

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

  回复于 2024-04-30T18:56:39+08:00
• 19

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

  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
  

  回复于 2024-04-30T18:56:39+08:00
• 1

  海 . 我和你一样思考着 . 我可以预见标签相互覆盖的问题，并且只能考虑两种方法 .

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

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

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

  回复于 2024-04-30T18:56:39+08:00