Question

编辑：我的原始数据似乎不包含三个堆叠条形图中的每一个的值。这是有效的，并且基于用户选择。示例：餐厅可能只有早餐菜单，但没有三明治或便餐（见下文）。

谷歌图表正在这一行中落下，其中没有（有效）缺少用户选择的ZERO物理条目。

是否有Google图表设置，将“缺失值”视为零值？

以下是JSON输入的示例：

   [{"store_name":"Store 1","dish_menu":"Breakfast","dish_count":"13"},
    {"store_name":"Store 1","dish_menu":"Light Meals","dish_count":"7"},
    {"store_name":"Store 1","dish_menu":"Sandwiches","dish_count":"7"},
    {"store_name":"Store 2","dish_menu":"Breakfast","dish_count":"13"},
    {"store_name":"Store 2","dish_menu":"Light Meals","dish_count":"7"},
    {"store_name":"Store 2","dish_menu":"Sandwiches","dish_count":"7"},
    {"store_name":"Store 3","dish_menu":"Breakfast","dish_count":"13"},   <-- FAILS HERE
    {"store_name":"Store 4","dish_menu":"Breakfast","dish_count":"13"},
    {"store_name":"Store 4","dish_menu":"Light Meals","dish_count":"7"},
    {"store_name":"Store 4","dish_menu":"Sandwiches","dish_count":"7"},]

我在一个页面上有3个Google图表，2个是饼图，1个是堆叠条。

今天，由于我无法理解的原因，堆积的条形图停止工作，消息检查显示为“错误：第14行有2列，但必须有4”，并指向Google代码的内容。这个页面已经生产了一个多月，工作得很好。

当我查看代码并将其与上次备份（工作正常，2周）进行比较时，代码完全相同。此外，SQL查询输出正常工作。

任何关于在哪里观看的建议都受到高度赞赏。

CODE：

function loadHQCharts() { 
// CHART #1 
    google.load('visualization', '1', {'packages':['corechart'], callback: drawChartDishMix});
// CHART #2 
    google.load('visualization', '1', {'packages':['corechart'], callback: drawChartMenuMix});
// CHART #3 
    google.load('visualization', '1', {'packages':['corechart'], callback: drawChartStoreMix});
};

function drawChartStoreMix() {

    var url =  window.location.origin + '/tce-php/getdata.php?var=HQLOADMMS';

    jQuery.getJSON( url, function(json) {

        // convert JSON to chart required format
        var stores = _.chain(json).pluck("store_name").sort().uniq(true).value();

        var tempHTML = "";
        jQuery('#store_list').empty();

        stores.forEach(function (entry) {
            tempHTML = tempHTML + '<option value="' + entry + '">' + entry + '</option>';
        });

        /*** Load data into drop down lists here ***/
        var store_selector = document.getElementById('store_list'); 
        store_selector.insertAdjacentHTML('beforeend', tempHTML);
        /*** Load default selections for top of drop down lists here ***/
        store_selector.insertAdjacentHTML('afterbegin', '<option selected="selected" value="ALL">All Stores...</option>');

        var header = _.chain(json).pluck("dish_menu").sort().uniq(true).value();
        header.unshift("Menus");

        var rows = _.chain(json)
                    .groupBy(function(item) { return item.store_name; })
                    .map(function(group, key) { 
            var result = [key];
            _.each(group, function(item) { 
                result[_.indexOf(header, item.dish_menu)] = parseInt(item.dish_count); 
            });
            return result; 
        })
        .value();

        var jsonData = [header].concat(rows);
        var data = google.visualization.arrayToDataTable(jsonData);

        // Set chart options
        var options = {
            title: 'Menu Mix By Store',
            titleTextStyle:{ color:'#747474', fontSize:'15', bold:false },
            isStacked: true,
            chartArea: { left: '55', top: '50', width: '88%', height: '65%' },              
            is3D: true,
            legend: { position:'top'}, 
            legendTextStyle: { color:'#747474', fontSize:'11', bold:false },
            bar: { groupWidth: '75%' },
            vAxis:{ title:'', textStyle:{color: '#747474',fontSize: '11', paddingRight: '0',marginRight: '0'} },
            hAxis: { title: '', textStyle: { color: '#747474', fontSize: '11', paddingRight: '0', marginRight: '0'} }
//          vAxis: {title: '# Dishes'},
//          hAxis: {title: 'Stores'}                
//          legend: {position: 'none'},
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.ColumnChart(document.getElementById('fran_mix'));
        chart.draw(data, options);  

    })
    .done(function() {
    })
    .fail(function() {
    });
};

JSON示例：

[{"store_name":"Store 1","dish_menu":"Breakfast","dish_count":"13"},
{"store_name":"Store 1","dish_menu":"Light Meals","dish_count":"7"},
{"store_name":"Store 1","dish_menu":"Sandwiches","dish_count":"7"},...]

Answer 1

问题不在于Visualization API不知道如何处理缺失值，而是因为您没有向DataTable构造函数提供完整的结构。您的jsonData变量包含如下数组：

[
    ['Menus', 'Breakfast', 'Light Meals', 'Sandwiches']
    ['Store 1', 13, 7, 7],
    ['Store 2', 13, 7, 7],
    ['Store 3', 13],
    ['Store 4', 13, 7, 7]
]

构造函数要求每行具有与DataTable相同的列数（在本例中由标题行定义）。如果你替换这一行：

var result = [key];

用这些：

var result = new Array(header.length).map(function () {return null;});
result[0] = key;

你的数组都是正确的长度，在你没有任何值的情况下填充空值。图表应该很好用。

对于API加载，只需一次调用即可将三次调用替换为google.load：

google.load('visualization', '1', {'packages':['corechart'], callback: function () {
    drawChartDishMix();
    drawChartMenuMix();
    drawChartStoreMix();
}});

谷歌图表停止工作 - 未捕获错误：第14行有2列，但必须有4列

1 个答案: