如何用 Google Visualization API 描述日线图？答案

【问题标题】：How to describe daily chart with Google Visualization API?如何用 Google Visualization API 描述日线图？
【发布时间】：2011-07-18 02:09:37
【问题描述】：

我试图用谷歌可视化 API。 http://code.google.com/apis/visualization/documentation/reference.html

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'}  
]

我想用上面的数据来描述一个周图，这意味着 x 轴应该有 7 天，并且在没有数据的情况下，该行应该是仅与现有数据连接。

感谢您的信息。我尝试了“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>

【问题讨论】：

我知道这不是您问题的答案，但请查看flot。就我的经验而言，它可以很好地处理缺乏数据。

标签： javascript google-visualization

【解决方案1】：

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

[
{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'}  
]

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

interpolateNulls: True

在你的 draw 方法中。编辑：图表类型必须是 LineChart 而不是 ImageLineChart 才能使 interpolateNulls 工作。

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

【讨论】：

谢谢，我试过 interpolateNulls，但没有用。我添加了我在问题上所做的事情。可以看看吗？
谢谢！是的，我应该使用 LineChart。现在它按我的预期工作了。
@yellowpecker 好！我很高兴这就是你所需要的。如果我的答案是您最终使用的答案，您可以将其标记为已接受的答案吗？谢谢！

【解决方案2】：

在我的选择中，只需在循环内创建一个控制结构来验证所有值。foreach 值验证它是否为 null。

这些数据是如何生成的？
您是从某处读取的，还是手动输入的？

在您的图表中：

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

我不测试自己，希望对你有帮助。

【讨论】：

谢谢，我试过 interpolateNulls，但没有用。我添加了我在问题上所做的事情。可以看看吗？
我已经检查过了，看起来现在可以工作了，是吗？与 interpolateNulls 一起使用非常好，很好地解决了问题。 ;)