Google Charts Dashboard: Wie reagiere ich darauf?

Question

Ich erstelle ein Google-Diagramm-Dashboard, aber ich habe Schwierigkeiten, darauf zu reagieren. Ich habe versucht, die Funktion zu verwenden, die normalen Google-Karten hinzugefügt wurde, im Gegensatz zu Dashboards, die zwar gut funktionieren, aber nicht die gleiche Wirkung haben. Bitte beachten Sie meinen Code unten. Der Code Ich versuche zu verwenden, um das Dashboard zu responsify ist an den unteren

Dank Aaron

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

der Nähe, aber ein paar Dinge ...

1. obwohl bind kehrt die dashboard (für die Verkettung mehrerer Bindungen),
   draw gibt nicht die dashboard, müssen separat aufrufen, um dashboard zu speichern

   Instanz

2. der 'resize' Hörer muss im gleichen Umfang wie dashboard und
   Sie sein müssen Sie den Verweis auf dashboard enthalten, wenn 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>