使用Google折线图绘制多个缺失值的图表

Question

我从Google折线图参考文档中复制了这段代码，并做了一些小修改:

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Dag');
    data.addColumn('number', 'Målvikt');
    data.addColumn('number', 'Uppmätt vikt');


    data.addRows([
      [1, 37.8, 55.0],
      [2, null, 69.5],
      [3, null, 57],
      [4, null, 18.8],
      [5, null, 17.6],
      [6, null, 13.6],
      [7, null, 12.3],
      [8, null, 29.2],
      [9, null, 42.9],
      [10, null, 30.9],
      [11, null, 7.9],
      [12, null, 8.4],
      [13, null, 6.3],
      [14, 30.8, 6.2]
    ]);

    var options = {
        chart: {
            title: 'Box Office Earnings in First Two Weeks of Opening',
            subtitle: 'in millions of dollars (USD)',
            interpolateNulls: true
        },
        width: 900,
        height: 500
    };

    var chart = new google.charts.Line(document.getElementById('linechart_material'));

    chart.draw(data, options);
}

我的第一行根本没有生成。 如您所见，我想仅为名为“Målvikt”的曲线提供第一个和最后一个数值，并在它们之间绘制一条直线。我发现了这个相关问题，并添加了interpolateNulls: true但实际上它并没有解决我的问题。 然后我将除一个null以外的所有null更改为某个值，但仍然没有线连接它的相邻点。我做错了什么？

- hellogoodnight

Answer 1

看起来 google.charts.Line 组件不支持 interpolateNulls 选项。

其次，指定 interpolateNulls 选项时有拼写错误。

根据配置选项，interpolateNulls 属性不属于 chart 属性，所以这行代码：

var options = {
    chart: {
        interpolateNulls: true
    }
};

应该替换为：

var options = {
    interpolateNulls: true
}; 

话虽如此，我建议使用corechart包中的google.visualization.LineChart而不是line包中的google.charts.Line组件。在这种情况下，interpolateNulls选项可以如下所示应用：

工作示例

google.load('visualization', '1.1', { packages: ['corechart'] });
google.setOnLoadCallback(drawChart);


function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Dag');
    data.addColumn('number', 'Målvikt');
    data.addColumn('number', 'Uppmätt vikt');


    data.addRows([
     [1, 37.8, 55.0],
     [2, null, 69.5],
     [3, null, 57],
     [4, null, 18.8],
     [5, null, 17.6],
     [6, null, 13.6],
     [7, null, 12.3],
     [8, null, 29.2],
     [9, null, 42.9],
     [10, null, 30.9],
     [11, null, 7.9],
     [12, null, 8.4],
     [13, null, 6.3],
     [14, 30.8, 6.2]
    ]);

    var options = {
        title: 'Box Office Earnings in First Two Weeks of Opening',
        subtitle: 'in millions of dollars (USD)',
        interpolateNulls: true,
        width: 900,
        height: 500
    };

    //var chart = new google.charts.Line(document.getElementById('linechart_material'));
    var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));


    chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="linechart_material" style="width: 640px; height: 480px"></div>

- Vadim Gremyachev