编辑:我的原始数据似乎不包含三个堆叠条形图中的每一个的值。这是有效的,并且基于用户选择。示例:餐厅可能只有早餐菜单,但没有三明治或便餐(见下文)。
谷歌图表正在这一行中落下,其中没有(有效)缺少用户选择的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"},...]
答案 0 :(得分:3)
问题不在于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();
}});