谷歌图表仪表板：如何使其响应？ [英] Google Charts Dashboard: How to make it responsive?

问题描述

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

感谢
Aaron

  google.load（'visualization'，'1.1'，{'packages'：['controls'，'linechart']}）; 
 //设置回调以在加载Google Visualization API时运行。 
 google.setOnLoadCallback（initialize）; 
函数initialize（）{
 //将下一行的数据源URL替换为您的数据源URL。 
 var query = new google.visualization.Query（'https://docs.google.com/spreadsheets/d/1kHnIbV5ZLjmcFXRfGx8hHVkLoYzYMMJlV3lk4Cr-R7I/edit?usp=sharing'）; 
 
 
 //用回调函数发送查询。 
 query.send（drawDashboard）; 
} 
 
函数drawDashboard（response）{
 var data = response.getDataTable（）; 
 //一切都已加载。组装你的仪表板... 
 var namePicker = new google.visualization.ControlWrapper（{$ b $'controlType'：'CategoryFilter'，$ b $'containerId'：'filter_div'，
'选项'：{
'filterColumnLabel'：'Name'，
'ui'：{
'labelStacking'：'vertical'，
'allowTyping'：false，
'allowMultiple'：false 
} 
} 
}）; 
 var laptimeChart = new google.visualization.ChartWrapper（{$ b $'chartType'：'LineChart'，
'containerId'：'chart_div'
}）; 
 
 var dashboard = new google.visualization.Dashboard（document.getElementById（'dashboard_div'））。 
绑定（namePicker，laptimeChart）。 
 draw（data）
 
} 
 $（window）.resize（function（）{
 draw（data）; 
 
} ）; 
  

解决方案

p>

1. 虽然 bind 返回仪表板（用于链接多个绑定），
   
   draw 不会返回仪表板 ，需要单独调用以保存仪表板实例




2. 'resize' 侦听器需要与仪表盘和
   
   在同一个范围内，您必须包含对的引用。当调用绘制




  google.charts.load（'current'，{callback：initialize，packages：['corechart'，'controls']}）; function initialize（）{var query = new google.visualization.Query（'https://docs.google.com/spreadsheets/d/1kHnIbV 5ZLjmcFXRfGx8hHVkLoYzYMMJlV3lk4Cr-R7I /编辑USP =共享）？; query.send（drawDashboard）;}函数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'}）; //保存对仪表板的引用var dashboard = new google.visualization.Dashboard（document.getElementById（'dashboard_div'））。绑定（namePicker，laptimeChart）; dashboard.draw（数据）; //包含在drawDashboard中$（window）.resize（function（）{//引用仪表板实例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>  

I'm building a Google charts dashboard but I'm having difficulty making it responsive. I've tried using the function added to normal Google charts, as opposed to Dashboards, which works great but it's not having the same impact. Please see my code below. The code I'm trying to use to responsify the dashboard is at the bottom

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

});  

解决方案

close, but a couple things...

1. although bind returns the dashboard (for chaining multiple binds),
   draw does not return the dashboard, need to call separately to save dashboard instance

2. the 'resize' listener needs to be in the same scope as dashboard and
   you must include the reference to dashboard when calling 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>

这篇关于谷歌图表仪表板：如何使其响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！