问题:我在一个连接到一个表的仪表板中有三个控件,但只有最后一个控件显示在我的UI中。请运行下面的代码,注意prefServFilter是唯一出现的代码。
我遵循了这个Google documentation信息。我将控件放在一个数组中以绑定'多对一'。这是与我的情况有关的小片段:
//多对一的绑定,其中'ageSelector'和'salarySelector'同时发生 //参与选择'ageVsSalaryScatterPlot'可视化的数据。
dashboard.bind([agePicker,salaryPicker],ageVsSalaryScatterPlot);
我似乎无法弄清楚为什么会发生这种情况,是否有人看到了解决方案?我错过了什么?我还检查了Google的问题跟踪器,但没有发现任何相关信息。
google.charts.load('current', {'packages':['table', 'controls']});
google.charts.setOnLoadCallback(initializeClient);
function initializeClient() {
var queryString = encodeURIComponent('SELECT A, B, C, D, E, F, G, H');
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1VhDR4B9EjkrITkXRCcrSiJXXPD-q-ud2CQ03XE51o1o/edit?usp=sharing&headers=1&tq=' + queryString);
query.send(drawClientDashboard);
}
function drawClientDashboard(response) {
var data = response.getDataTable();
// create a dashboard
var dashboard = new google.visualization.Dashboard( document.getElementById('client-dashboard') );
// categoryFilter for name
var nameFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'client-filter',
'options': {
'filterColumnIndex': 0,
'ui.labelStacking':'vertical'
}
});
// categoryFilter for type of business
var bizTypeFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'client-filter',
'options': {
'filterColumnIndex': 1,
'ui.labelStacking':'vertical'
}
});
// stringFilter for associated cofc
var prefServFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'client-filter',
'options': {
'filterColumnIndex': 6,
'ui.labelStacking':'vertical'
}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'client-table',
'options': {
'width': '100%',
'height': '500px'
}
});
// bind my 3 controls to table
dashboard.bind([nameFilter, bizTypeFilter, prefServFilter], table);
dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<body>
<div id="client-dashboard">
<div id="client-filter"></div>
<div id="client-table"></div>
</div>
</body>