Google 图表仪表板未扩展到 100% 高度？

Question

我正在尝试向 google 图表添加滑块，但我无法将 programmatic_chart_div 设置为 100% 填充整个页面的高度。我做错了什么？

google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawStuff);
var dashboard = 0;
var data = 0;
function drawStuff() {

  dashboard = new google.visualization.Dashboard(
    document.getElementById('programmatic_dashboard_div'));

  // We omit "var" so that programmaticSlider is visible to changeRange.
  var programmaticSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'programmatic_control_div',
    'options': {
      'filterColumnLabel': 'Donuts eaten',
      'ui': {'labelStacking': 'vertical'}
    }
  });

  var programmaticChart  = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'programmatic_chart_div',
    'options': {
      'width': '100%',
      'height': '100%',
      'legend': 'none',
      'chartArea': {
        'width': '100%',
        'height': '100%'
      },
      'pieSliceText': 'value'
    }
  });

  data = google.visualization.arrayToDataTable([
    ['Name', 'Donuts eaten'],
    ['Michael' , 5],
    ['Elisa', 7],
    ['Robert', 3],
    ['John', 2],
    ['Jessica', 6],
    ['Aaron', 1],
    ['Margareth', 8]
  ]);
  
  dashboard.bind(programmaticSlider, programmaticChart);
  drawChart();
}

window.addEventListener('resize', drawChart, false);
function drawChart() {
  dashboard.draw(data);
}

body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

#topDiv {
  padding: 10px;
  height: 100%;
  background-color: green;
  width: calc (100% - 20px);
  max-height: calc(100vh - 20px);
}

#programmatic_dashboard_div {
  height: 100%;
  width: calc (100% - 40px);
  background-color: lightblue;
  max-height: inherit;
  overflow: scroll;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="topDiv">
  <div id="programmatic_dashboard_div">
    <div id="programmatic_control_div"></div>
    <div id="programmatic_chart_div" ></div>
  </div>
</div>

jsfiddle

Answer 1

需要向 <html> 元素添加 100% 高度（使用与 <body> 相同的方法）
以及图表的 <div> 元素

添加以下内容css...

html {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

#programmatic_chart_div {
  height: 100%;
}

请参阅以下工作片段...

google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawStuff);
var dashboard = 0;
var data = 0;
function drawStuff() {

  dashboard = new google.visualization.Dashboard(
    document.getElementById('programmatic_dashboard_div'));

  // We omit "var" so that programmaticSlider is visible to changeRange.
  var programmaticSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'programmatic_control_div',
    'options': {
      'filterColumnLabel': 'Donuts eaten',
      'ui': {'labelStacking': 'vertical'}
    }
  });

  var programmaticChart  = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'programmatic_chart_div',
    'options': {
      'width': '100%',
      'height': '100%',
      'legend': 'none',
      'chartArea': {
        'width': '100%',
        'height': '100%'
      },
      'pieSliceText': 'value'
    }
  });

  data = google.visualization.arrayToDataTable([
    ['Name', 'Donuts eaten'],
    ['Michael' , 5],
    ['Elisa', 7],
    ['Robert', 3],
    ['John', 2],
    ['Jessica', 6],
    ['Aaron', 1],
    ['Margareth', 8]
  ]);
  
  dashboard.bind(programmaticSlider, programmaticChart);
  drawChart();
}

window.addEventListener('resize', drawChart, false);
function drawChart() {
  dashboard.draw(data);
}

body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

html {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

#topDiv {
  padding: 10px;
  height: 100%;
  background-color: green;
  width: calc (100% - 20px);
  max-height: calc(100vh - 20px);
}

#programmatic_dashboard_div {
  height: 100%;
  width: calc (100% - 40px);
  background-color: lightblue;
  max-height: inherit;
  overflow: scroll;
}

#programmatic_chart_div {
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="topDiv">
  <div id="programmatic_dashboard_div">
    <div id="programmatic_control_div"></div>
    <div id="programmatic_chart_div" ></div>
  </div>
</div>

Google 图表仪表板未扩展到 100% 高度？

Google Chart Dashboard not expanding to 100% height?

html

css

charts

google-visualization