使用Google Charts插入Null

时间:2017-07-29 06:11:27

标签: javascript google-visualization

我正在尝试显示此图表,有时每行都会显示空值。我已将“interpolateNulls”添加到我的选项中,但它仍然无效。这可能是一个简单的解决方案,但我被卡住了。

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Day');
    data.addColumn('number', 'Guardians of the Galaxy');
    data.addColumn('number', 'The Avengers');
    data.addColumn('number', 'Transformers: Age of Extinction');

    data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9, null, 42.9, null],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
    ]);

    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, google.charts.Line.convertOptions(options));
}

1 个答案:

答案 0 :(得分:1)

interpolateNulls材料图表中不支持的众多选项之一

材料google.charts.Line

参见 - > Tracking Issue for Material Chart Feature Parity

相反,建议使用 Classic 图表,并使用以下选项...

theme: 'material'

经典google.visualization.LineChart