Google Charts 停止工作 - 未捕获的错误：第 14 行有 2 列，但必须有 4

Question

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

谷歌图表在这一行失败，对于（有效的）丢失的用户选择，没有零的物理条目。

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

以下是 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 查询输出工作正常。

任何关于在哪里看的建议都非常感谢。

代码：

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();
}});