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

Question

我正在构建Google图表仪表板，但我很难使其响应。我试过使用添加到普通谷歌图表的功能，而不是仪表板，这很好用，但没有相同的影响。请参阅下面的代码。我试图用它来responsify仪表板的代码是在底部

感谢 亚伦

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

}); 

Answer 1

接近，但有两件事情......

1. 虽然bind回报dashboard（用于链接多个绑定），
   draw不返回dashboard，需要单独调用以保存dashboard例如

2. 的'resize'监听器需要在同一范围为dashboard和
   必须包括参考dashboard调用draw

google.charts.load('current', { 
 
    callback: initialize, 
 
    packages: ['corechart', 'controls'] 
 
}); 
 

 
function initialize() { 
 
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1kHnIbV5ZLjmcFXRfGx8hHVkLoYzYMMJlV3lk4Cr-R7I/edit?usp=sharing'); 
 
    query.send(drawDashboard); 
 
} 
 

 
function drawDashboard(response) { 
 
    var data = response.getDataTable(); 
 
    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' 
 
    }); 
 

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

 
    // include within drawDashboard 
 
    $(window).resize(function() { 
 
    // reference dashboard instance 
 
    dashboard.draw(data); 
 
    }); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dashboard_div"> 
 
    <div id="chart_div"></div> 
 
    <div id="filter_div"></div> 
 
</div>