谷歌圖表儀表板：如何使其響應？

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>