javascript - 如何让highchart的Tree Map图表填满整个页面而不溢出

Question

HighChart 的树形图系列在以固定高度填充整个页面宽度时就像一个魅力：当您调整页面大小时，树形图将相应地水平调整大小。

另一方面，如果您尝试将高度设置为百分比，则调整大小会完全中断。我无法制作水平和垂直填充整个页面的树形图。我真的觉得我错过了什么！

我做了一个小提琴来显示问题：https ://jsfiddle.net/gqeLfxy3/

将 body 和图表的容器高度和宽度设置为 100% 并没有帮助。

body {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
.highcharts-figure {
    width: 100%;
    height: 100%;
    margin: 0;
}

如果图表高度设置为百分比，它会“严重”调整大小：

Highcharts.chart('container', {
        chart: {
        height: '100%', // set it to a fixed size and the chart will behave well but won't fill the entire height
      margin:0
    },

图表应该填满页面而不是溢出。我没有找到任何方法来设置图表的固定高度，并可能监听调整大小事件。

有谁知道实现这一目标的方法？

标签： javascriptcsshighcharts

Answer 1

您需要使用vh单位：

#container {
  height: 100vh;
}

---

现场演示： https ://jsfiddle.net/BlackLabel/yudsaL8n/

API 参考：https ://api.highcharts.com/highmaps/chart.height