Google visualization 谷歌图表仪表板：如何使其响应？

我正在构建一个谷歌图表仪表板，但我很难让它响应。我曾尝试使用添加到普通谷歌图表中的功能，而不是仪表盘，它工作得很好，但没有同样的效果。请看下面我的代码。我试图用来响应仪表板的代码位于底部

谢谢 亚伦

---

很接近，但有几件事

尽管

bind

返回

仪表板（用于链接多个绑定），

draw
不返回
仪表板
，需要单独调用以保存
仪表板
实例

'resize'

监听器需要与

仪表板和
在同一范围内
调用
draw

google.charts.load（'current'{
回调：初始化，
包：['corechart'，'controls']
});
函数初始化（）{
var query=new google.visualization.query（'https://docs.google.com/spreadsheets/d/1kHnIbV5ZLjmcFXRfGx8hHVkLoYzYMMJlV3lk4Cr-R7I/edit?usp=sharing');
查询.发送（drawDashboard）；
}
功能面板（响应）{
var data=response.getDataTable（）；
var namePicker=new google.visualization.ControlWrapper({
controlType:“CategoryFilter”，
containerId:“过滤器分区”，
选项：{
filterColumnLabel:'名称'，
用户界面：{
标签定位：“垂直”，
allowTyping:false，
allowMultiple:false
}
}
});
var laptimeChart=new google.visualization.ChartWrapper({
图表类型：“线条图”，
集装箱船：“海图分区”
});
//保存对仪表板的引用
var dashboard=new google.visualization.dashboard（document.getElementById（'dashboard_div'））。
绑定（名称选择器、laptimeChart）；
仪表盘.绘图（数据）；
//包含在drawDashboard中
$（窗口）。调整大小（函数（）{
//参考仪表板实例
仪表盘.绘图（数据）；
});
}

---

结束，但有几件事

尽管

bind

返回

仪表板（用于链接多个绑定），

draw
不返回
仪表板
，需要单独调用以保存
仪表板
实例

'resize'

监听器需要与

仪表板和
在同一范围内
调用
draw

google.charts.load（'current'{
回调：初始化，
包：['corechart'，'controls']
});
函数初始化（）{
var query=new google.visualization.query（'https://docs.google.com/spreadsheets/d/1kHnIbV5ZLjmcFXRfGx8hHVkLoYzYMMJlV3lk4Cr-R7I/edit?usp=sharing');
查询.发送（drawDashboard）；
}
功能面板（响应）{
var data=response.getDataTable（）；
var namePicker=new google.visualization.ControlWrapper({
controlType:“CategoryFilter”，
containerId:“过滤器分区”，
选项：{
filterColumnLabel:'名称'，
用户界面：{
标签定位：“垂直”，
allowTyping:false，
allowMultiple:false
}
}
});
var laptimeChart=new google.visualization.ChartWrapper({
图表类型：“线条图”，
集装箱船：“海图分区”
});
//保存对仪表板的引用
var dashboard=new google.visualization.dashboard（document.getElementById（'dashboard_div'））。
绑定（名称选择器、laptimeChart）；
仪表盘.绘图（数据）；
//包含在drawDashboard中
$（窗口）。调整大小（函数（）{
//参考仪表板实例
仪表盘.绘图（数据）；
});
}

还建议使用

loader.js

加载库，与

jsapi

相比，还建议使用

loader.js

加载库，与

jsapi

 google.load('visualization', '1.1', {'packages':['controls','linechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(initialize);
function initialize() {
  // Replace the data source URL on next line with your data source URL.
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1kHnIbV5ZLjmcFXRfGx8hHVkLoYzYMMJlV3lk4Cr-R7I/edit?usp=sharing');


  // Send the query with a callback function.
  query.send(drawDashboard);
}

function drawDashboard(response) {
  var data = response.getDataTable();
  // Everything is loaded. Assemble your dashboard...
  var namePicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'Name',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false    
      }
    }
  });
  var laptimeChart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart_div'
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
    bind(namePicker, laptimeChart).
    draw(data)

}
$(window).resize(function() {
  draw(data);

});