用多个缺失值绘制Google折线图 [英] Draw Google Line Chart with multiple missing values

问题描述

我从Google折线图参考中复制了此代码，并做了一些小的更改：

I copied this code from Google Line Chart reference and made some small changes:

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更改为某个值，但是它的邻居之间仍然没有任何连线。我在做什么错？

My first line is not generated at all. As you see, I want to just give the first and last value for the curve named "Målvikt" and draw a straight line between them. I found this related question and added interpolateNulls: true but actually it did not solve my problem. I then changed all nulls except one to some value, but there still was no line between its neighbors. What am I doing wrong?

推荐答案

似乎 google.charts.Line 组件不支持 interpolateNulls 选项。

It seems that google.charts.Line component does not support interpolateNulls option.

第二，指定 interpolateNulls 选项时有错字。

Secondly, there is typo in specifying interpolateNulls option.

由于 interpolateNulls 属性不属于 chart 属性， .google.com / chart / interactive / docs / gallery / linechart？csw = 1＃Configuration_Options rel = noreferrer>配置选项，该行：

Since interpolateNulls property does not belong to chart property according to Configuration Options, the line:

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

应替换为：

var options = {
    interpolateNulls: true
}; 

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

Having said that, i would recommend to utilize google.visualization.LineChart from corechart package instead of google.charts.Line component from line package. In that case interpolateNulls option could applied as demonstrated below:

工作示例

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>

这篇关于用多个缺失值绘制Google折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！