Javascript 使用控制包装器处理多项选择题的Google图表
我有一个选择题（复选框）的数据-数据的结构是这样的，一个人可以选择无、一个或多个选项，因此数据保存在多个列中。我正在尝试使用控件包装器构建一个google图表，这样它就可以过滤了，但同时我想用百分比而不是计数来绘制数据。。这是一个棘手的部分，因为基数（或分母）将是回答问题的总人数，而不是文件中活动行的总数。。因此，在我的数据中，基数/分母是8（因为只有8人回答了这个问题，2人留空/没有回答），我希望每列中每个“是”的计数除以8，以计算每个选项的百分比，然后在一个条形图中绘制所有选项。数据在本电子表格中： 我还将所需的输出图表保存在同一张表中@WhiteHat帮助我在数据视图中聚合数据（我非常感谢他在这里为我指明了正确的方向！！！），但当我创建了一个具有所需列的新数据视图时，我的图表没有绘制出来-我收到错误消息“给定轴上的所有系列必须具有相同的数据类型” 到目前为止，我的代码是：Javascript 使用控制包装器处理多项选择题的Google图表,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我有一个选择题（复选框）的数据-数据的结构是这样的，一个人可以选择无、一个或多个选项，因此数据保存在多个列中。我正在尝试使用控件包装器构建一个google图表，这样它就可以过滤了，但同时我想用百分比而不是计数来绘制数据。。这是一个棘手的部分，因为基数（或分母）将是回答问题的总人数，而不是文件中活动行的总数。。因此，在我的数据中，基数/分母是8（因为只有8人回答了这个问题，2人留空/没有回答），我希望每列中每个“是”的计数除以8，以计算每个选项的百分比，然后在一个条形图中绘制所有选项。数据在本电子
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
function drawVisualization() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/19VWNZkHG5GEuYCibDmtOlKblKiOWcx94Wi9jyuhvEUo/edit?gid=0&range=A:H');
query.send(handleQueryResponse);
function handleQueryResponse(response) {
if (response.isError()) {return; }
var data = response.getDataTable();
// Define category pickers for All Filters
var CardTier = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'CardTier Filter',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
var Campaign = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Campaign Filter',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Define a bar chart to show 'Population' data
var barChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart1',
'options': options_Column
});
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, 4, 5, 6, {
calc: function (dt, row) {
var answered = 0;
var q1_1 = dt.getValue(row, 3) || '';
var q1_2 = dt.getValue(row, 4) || '';
var q1_3 = dt.getValue(row, 5) || '';
var q1_4 = dt.getValue(row, 6) || '';
if ((q1_1 !== '') || (q1_2 !== '') || (q1_3 !== '') || (q1_4 !== '')) {
answered = 1;
}
return answered;
},
label: 'Answered',
type: 'number'
}]);
var totalAnswered = google.visualization.data.group(
view,
[{column: 0, type: 'string', modifier: function () {return 'Total';}}],
[{
column: view.getNumberOfColumns() - 1,
type: 'number',
label: view.getColumnLabel(view.getNumberOfColumns() - 1),
aggregation: google.visualization.data.sum
}]
);
var proxyTable = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'proxyTable',
dataTable: view
});
proxyTable.draw();
document.getElementById('proxyTableTotal').innerHTML = 'Total Answered = ' + totalAnswered.getValue(0, 1);
// create a "ready" event handler for proxyTable the handles data aggregation and drawing barChart
// Add The question's column index here. We want to draw Status so we Group 2 with dt and also its count...
google.visualization.events.addListener(proxyTable, 'ready', function () {
var formatShort = new google.visualization.NumberFormat({
pattern: 'short'
});
var formatPercent = new google.visualization.NumberFormat({
pattern: '0.0%'
});
var dataTable = proxyTable.getDataTable();
var view2 = new google.visualization.DataView(proxyTable);
view.setColumns([3, 4, 5, 6, {
calc: function (dt, row) {
var amount = dt.getValue(row, 1);
var percent = 0;
if (totalAnswered.getValue(0, 1) > 0) {
percent = amount / totalAnswered.getValue(0, 1);
}
return {
v: percent,
f: formatPercent.formatValue(percent)
};
},
type: 'number',
label: 'Percent'
}, {
calc: function (dt, row) {
var amount = dt.getValue(row, 1);
var percent = 0;
if (totalAnswered.getValue(0, 1) > 0) {
percent = amount / totalAnswered.getValue(0, 1);
}
return 'N=' + formatShort.formatValue(amount) + ' (' + formatPercent.formatValue(percent) + ')';
},
type: 'string',
role: 'annotation'
}]);
// after grouping, the data will be sorted by column 0, then 1, then 2
// if you want a different order, you have to re-sort
barChart.setDataTable(view2);
barChart.draw();
});
// Create the dashboard.
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the controls :
bind(CardTier, Campaign).
bind(Campaign, proxyTable).
// Draw the dashboard
draw(data);
}
}
google.load('visualization', '1', {packages:['corechart', 'controls', 'table'], callback: drawVisualization});
</script>
</head>
<body>
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
</td>
</tr>
</table>
<div id="proxyTable" ></div>
<div id="proxyTableTotal" ></div>
</div>
</body>
</html>
函数drawVisualization（）{
var query=new google.visualization.query（'https://docs.google.com/spreadsheets/d/19VWNZkHG5GEuYCibDmtOlKblKiOWcx94Wi9jyuhvEUo/edit?gid=0&range=A:H');
发送（handleQueryResponse）；
函数handleQueryResponse（响应）{
if（response.isError（））{return；}
var data=response.getDataTable（）；
//为所有过滤器定义类别选择器
var carditier=new google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“containerId”：“control1”，
“选项”：{
“filterColumnLabel”：“CardTier筛选器”，
“用户界面”：{
“标签固定”：“垂直”，
“allowTyping”：false，
“allowMultiple”：true
}
}
});
var Campaign=new google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“containerId”：“control2”，
“选项”：{
'filterColumnLabel'：'Campaign Filter'，
“用户界面”：{
“标签固定”：“垂直”，
“allowTyping”：false，
“allowMultiple”：true
}
}
});
//定义条形图以显示“人口”数据
var barChart=new google.visualization.ChartWrapper({
“chartType”：“ColumnChart”，
“集装箱运输”：“图表1”，
“选项”：选项\u列
});
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,2,3,4,5,6{
计算：函数（dt，行）{
var=0；
var q1|u 1=dt.getValue（第3行）| |“”；
var q1|u 2=dt.getValue（第4行）| |“”；
var q1|u 3=dt.getValue（第5行）| |“”；
var q1|u 4=dt.getValue（第6行）| |“”；
如果（（q1_1！=''）| |（q1_2！=''）| |（q1_3！=''）| |（q1_4！=''）{
回答=1；
}
回答；
},
标签：'已回答'，
键入：“数字”
}]);
var totalAnswered=google.visualization.data.group(
看法
[{列：0，类型：'string'，修饰符：函数（）{return'Total'；}}]，
[{
column:view.getNumberOfColumns（）-1，
键入：“编号”，
标签：view.getColumnLabel（view.getNumberOfColumns（）-1），
聚合：google.visualization.data.sum
}]
);
var proxyTable=new google.visualization.ChartWrapper({
chartType:'表'，
containerId:“proxyTable”，
数据表：视图
});
proxyTable.draw（）；
document.getElementById（'proxyTableTotal'）.innerHTML='Total Answered='+totalAnswered.getValue（0,1）；
//为proxyTable创建一个“就绪”事件处理程序处理数据聚合和绘制条形图
//在这里添加问题的列索引。我们想要绘制状态，所以我们用dt和它的计数将2分组。。。
google.visualization.events.addListener（proxyTable，'ready'，function（）{
var formatShort=new google.visualization.NumberFormat({
图案：“短”
});
var formatPercent=new google.visualization.NumberFormat({
模式：“0.0%”
});
var dataTable=proxyTable.getDataTable（）；
var view2=新的google.visualization.DataView（proxyTable）；
view.setColumns（[3,4,5,6{
计算：函数（dt，行）{
var金额=dt.getValue（第1行）；
风险值百分比=0；
if（totalAnswered.getValue（0，1）>0）{
百分比=金额/TotalResponsed.getValue（0,1）；
}
返回{
v:百分之,，
f:formatPercent.formatValue（百分比）
};
},
键入：“编号”，
标签：“百分比”
}, {
计算：函数（dt，行）{
var金额=dt.getValue（第1行）；
风险值百分比=0；
if（totalAnswered.getValue（0，1）>0）{
百分比=金额/TotalResponsed.getValue（0,1）；
}
返回'N='+formatShort.formatValue（金额）+'（'+formatPercent.formatValue（百分比）+'）；
},
键入：“字符串”，
角色：“注释”
}]);
//分组后，数据将按列0、1、2进行排序
//如果您想要不同的订单，您必须重新排序
条形图.setDataTable（视图2）；
barChart.draw（）；
});
//创建da