处理谷歌图表上的空数据

Handling null data on Google Charts

本文关键字：数据 谷歌 处理      更新时间：2023-09-26

我正在尝试使用给定数据创建复合图表，即 [date， value1， value2]，但是我无法处理此类输入：

// [["Day","Dose","INR"],["17/04",1.5,null]]
// [["Day","Dose","INR"]]
// [["Day","Dose","INR"],["17/04",1.5,null],["18/04",2.5,null]]

也就是说，当有一组具有特定值的数据都由空值组成时，我无法将其绘制在图形上。这样的输入很好：

// [["Day","Dose","INR"],["17/04",1.5,null],["18/04",2.5,0.9]]
// [["Day","Dose","INR"],["17/04",1.5,null],["18/04",2.5,0.9],["19/04",null,1.4]]

这是我绘制图形的javascript代码。数据来自 Ruby 模型。

$(function () { 
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawVisualization);
    function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable(<%= DrugInr.generate_array(@patient) %>);
        var options = {
            vAxes: { 1: {title: 'Dose', format: '#.#', maxValue: 20}, 
            0: {title: 'INR',format: '#.#', minValue: -1, baselineColor:"#CCCCCC"} },
            hAxis: {title: 'Day'},
            seriesType: 'bars',
            bar: {
                groupWidth: 2
            },
            series: {
                0:{ type: "bars", targetAxisIndex: 1 },
                1:{ type: 'line', targetAxisIndex: 0}
            }
    };

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
});

如何处理这些半空值？

我会推荐interpolateNulls选项。有关详细信息，请参阅组合图配置选项文档。

var options = {
    interpolateNulls: true
};

此选项仅告诉图表在存在 null 时猜测您的值是什么，而不是留下间隙。无论如何，在大多数情况下都有效。

我像这样创建数据表解决了这个问题： 

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'INR');
data.addColumn('number', 'Dosage');
data.addRows(<%= DrugInr.generate_array(@patient) %>);
var options = {
    vAxes: { 1: {title: 'Dose', format: '#.#', maxValue: 20}, 
    0: {title: 'INR',format: '#.#', minValue: -1, baselineColor:"#CCCCCC"} },
    hAxis: {title: 'Day'},
    seriesType: 'bars',
    bar: {
        groupWidth: 5
    },
    series: {
        0:{ type: "bars", targetAxisIndex: 1 },
        1:{ type: 'line', targetAxisIndex: 0}
    }
};
相关文章：