Google Chartsダッシュボード：応答性を高める方法

Question

私はGoogleのグラフダッシュボードを作成していますが、それは応答性に問題があります。私は正常な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（複数のバインドを連鎖させる場合）
   drawdashboardを返さない場合は、別途呼び出して保存する必要があります。dashboarddraw

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>