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”的曲线的第一个和最后一个值，并在它们之间画一条直线。我找到了this related question并添加了interpolateNulls: true，但实际上并没有解决我的问题。然后我将所有空值更改为除了一个值到某个值，但是它的邻居之间仍然没有行。我做错了什么？

Answer 1

似乎interpolateNulls组件不支持interpolateNulls选项。

其次，指定interpolateNulls选项时会出现拼写错误。

由于chart属性根据in this answer不属于var options = { chart: { interpolateNulls: true } };属性，因此行：

var options = {
    interpolateNulls: true
};

应替换为：

google.visualization.LineChart

话虽如此，我建议您使用corechart包中的google.charts.Line代替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>

{{1}}

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

1 个答案: