Question

我正在构建一个Google图表信息中心，但我很难做出响应。我已经尝试使用添加到普通Google图表中的功能，而不是Dashboards，它运行良好，但它没有同样的影响。请参阅下面的代码。我试图用来对仪表板进行响应的代码位于底部

由于亚伦

 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

关闭，但有几件事......

虽然bind返回dashboard（用于链接多个绑定），但是 draw未返回dashboard，需要单独调用以保存dashboard实例
'resize'侦听器需要与dashboard和
的范围相同调用dashboard

draw

＆＃13;

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

＆＃13;

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

＆＃13;

Google Charts Dashboard：如何使其响应？

1 个答案: