文章/答案/技术大牛

发布

社区首页 >问答首页 >谷歌图表仪表板不扩展到100%的高度？

问谷歌图表仪表板不扩展到100%的高度？
EN

Stack Overflow用户

提问于 2022-01-15 03:24:09

回答 1查看 113关注 0票数 2

我试图在谷歌图表中添加一个滑块，但我不能将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>

小提琴

html

css

charts

google-visualization

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-18 14:41:52

需要将100%的高度添加到<html>元素(与<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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70718651

复制

相似问题

问谷歌图表仪表板不扩展到100%的高度？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌图表仪表板不扩展到100%的高度？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌图表仪表板不扩展到100%的高度？
EN