使用带有部分数据的google图表api创建图表

问题描述:

我想创建折线图。目前我的图形看起来像这样使用带有部分数据的google图表api创建图表

enter image description here

的数据是实时所以图表应该在上午09点开始,朝向x轴增加高达16:00

当用户在下午12点生成图表。 我预期的结果是(注:数据仅可高达12点。)

enter image description here

我无法找到一个方法来产生部分图表上方。任何想法?

+0

为什么你需要个小时,直到下午4点x如果这只是中午12点?只需获取当前时间(整小时)并将其用作x轴的最高值。这样你就可以获得当前小时的完整图表。如果用户在中午加载页面,图表将显示直到中午的数据,否则直到一天结束。如果您需要在下午4点在x轴上缩短时间值,则可以添加将使用当前时间或下午4点的条件,如果是在下午4点以后,但不到第二天上午9点。 – 2011-05-31 21:55:05

+0

这是客户的要求。我已经按照你在这里描述的方式显示图表。客户希望以这种方式... – Manjoor 2011-06-14 15:23:25

我希望我能正确理解这一点。评论中的代码是数据的其余部分(从下午12点到下午4点)。如果没有这些数据,图表会根据您的需要显示部分图表。

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string'); 
     data.addColumn('number'); 
     data.addRows(8);  
     data.setValue(0, 0, '9AM'); 
     data.setValue(2, 0, '11AM'); 
     data.setValue(4, 0, '1PM'); 
     data.setValue(6, 0, '3PM'); 
     data.setValue(7, 0, '4PM'); 

     data.setValue(0, 1, 5480); // 9AM 
     data.setValue(1, 1, 5475); // 10AM 
     data.setValue(2, 1, 5490); // 11AM 
     data.setValue(3, 1, 5490); // 12PM 
     /* 
     data.setValue(4, 1, 5500); // 1PM 
     data.setValue(5, 1, 5490); // 2PM 
     data.setValue(6, 1, 5530); // 3PM 
     data.setValue(7, 1, 5560); // 4PM 
     */ 

     var chart = 
      new google.visualization.AreaChart(document.getElementById('chart_div')); 
      chart.draw(data, {width: 500, height: 240, 
          vAxis: {minValue: 5460, maxValue: 5560}, 
          colors: ['#76A4FB'], 
          legend: 'none' 
         }); 
      } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div"></div> 
    </body> 
</html> 

我希望这有助于。

+0

如何为每个小时添加4个数据行?我需要每15分钟更新一次。 – Manjoor 2011-06-24 13:01:52

+0

要每15分钟捕获一次9-4,您需要30行数据(而不是8行)。如果你想每小时X轴标签,你需要将它们设置在以下行:0,6,10,14,18,22,26,30 – 2011-06-24 13:25:44

+0

感谢您的答案,这指出我的方式:明确设置'minValue '和'maxValue'值。在我的例子中(这与原始问题非常相似),这些必须在'hAxis'下设置。 – n0nick 2014-01-04 15:39:29