如何使用Google Visualization API描述日常图表？

我试图用谷歌可视化API来描述日线图。 http://code.google.com/apis/visualization/documentation/reference.html 如何使用Google Visualization API描述日常图表？

DataTable对象是这样的。

[ 
{date:'3/1', value:'1000'}, 
{date:'3/2', value:'1500'}, 
{date:'3/3', value:'1200'}, 
{date:'3/4', value:'1300'}, 
{date:'3/5', value:'1400'}, 
{date:'3/6', value:'1100'}, 
{date:'3/7', value:'1200'} 
]

有了上面的数据，该图显示了一周的记录。

即使某些数据不足，我也想描述周图。

[ 
{date:'3/1', value:'1000'}, 
{date:'3/2', value:'1500'}, 
{date:'3/5', value:'1400'}, 
{date:'3/7', value:'1200'} 
]

我要描述与上面的数据一周图表，这意味着应该有7天为x轴，并且在壳体没有数据，该行应是仅与现有的连接数据。

谢谢您的信息。我尝试'interpolateNulls'，但不符合我的预期。

使用下面的代码，3/2和3/4之间的换行符。我想要连接3/2-3/4。

<html> 
    <head> 
    <script type='text/javascript' src='https://www.google.com/jsapi'></script> 
    <script type='text/javascript'> 
    google.load("visualization", "1.0", {packages:["imagechart"]}); 
    </script> 
    <script type='text/javascript'> 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var dataTable = new google.visualization.DataTable(); 
     dataTable.addColumn('string'); 
     dataTable.addColumn('number'); 
     var data = [['3/1',1000],['3/2',1300],['3/3',null],['3/4',1800],['3/5',900],['3/6',1200],['3/7',1000]]; 
     dataTable.addRows(data); 
     var options = {cht: 'lc', chds:'0,3000', interpolateNulls: true}; 

     var chart = new google.visualization.ImageChart(document.getElementById('chart_div')); 
     chart.draw(dataTable, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id='chart_div'></div> 
    </body> 
</html>

来源

2011-03-18 yellowpecker

我知道这不是您的问题的答案，但请查看[flot]（http://code.google.com/p/flot/）。就我的经验而言，它可以处理缺乏数据的好处。 – David 2011-03-18 13:52:19

为每周的每个日期添加一个条目，并将缺失值的值设置为空。

[ 
{date:'3/1', value:'1000'}, 
{date:'3/2', value:'1500'}, 
{date:'3/3', value: null }, 
{date:'3/4', value: null }, 
{date:'3/5', value:'1400'}, 
{date:'3/7', value:'1200'} 
]

行char的配置选项之一是interpolateNulls。使用

interpolateNulls: True

在您的绘图方法中。编辑：图表类型必须是一个LineChart而不是一个ImageLineChart的interpolateNulls工作。

有关配置选项的文档是here。

来源

2011-03-18 14:13:32 Jelly

谢谢，我尝试interpolateNulls，但不起作用。我添加了我所做的问题。你能检查出来吗？ – yellowpecker 2011-03-19 02:03:37

谢谢！是的，我应该使用LineChart。现在它按我的预期工作。 – yellowpecker 2011-03-20 00:05:56

@yellowpecker好！我很高兴那就是你需要的。如果我的答案是您最终使用的答案，您能否将其标记为已接受的答案？谢谢！ – Jelly 2011-03-20 14:18:51

在我的opnion只是在循环内创建一个控制结构来验证所有值.. foreach值验证是否是null。

如何生成这些数据？
你是从某个地方读的，还是手工输入的？

在您的图表：

chart.draw(data, {interpolateNulls: True, width: 400, height: 240, title: 'Company Performance'});

我不考我自己，我希望这种帮助。

来源

2011-03-18 14:52:38 B4NZ41

谢谢，我尝试interpolateNulls，但不起作用。我添加了我所做的问题。你能检查出来吗？ – yellowpecker 2011-03-19 02:05:26

我已经检查过了，看起来像现在工作，是吗？与interpolateNulls很好用，很好的解决了这个问题。 ;） – B4NZ41 2011-03-21 12:40:37

如何使用Google Visualization API描述日常图表？

回答

相关问题