Highcharts - 如何拥有动态高度的图表？答案

【问题标题】：Highcharts - how to have a chart with dynamic height?Highcharts - 如何拥有动态高度的图表？
【发布时间】：2012-02-07 06:04:13
【问题描述】：

我想要一个随浏览器窗口调整大小的图表，但问题是高度固定为 400 像素。 This JSFiddle example也有同样的问题。

我该怎么做？我尝试使用 chart.events.redraw 事件处理程序来调整图表的大小（使用 .setSize），但我猜它会启动一个永无止境的循环（触发事件处理程序，它调用 setSize，触发另一个事件处理程序等）。

【问题讨论】：

【解决方案1】：

我遇到了同样的问题，我用以下方法解决了它：

<div id="container" style="width: 100%; height: 100%; position:absolute"></div>

即使我调整了它的大小，该图表也非常适合浏览器。您可以根据需要更改百分比。

【讨论】：

【解决方案2】：

当使用百分比时，高度相对于宽度会随之动态变化：

chart: {
    height: (9 / 16 * 100) + '%' // 16:9 ratio
},

【讨论】：

【解决方案3】：

另一个不错的选择是传递一个 renderTo HTML 引用。如果是字符串，则使用该 id 的元素。否则你可以这样做：

chart: {
    renderTo: document.getElementById('container')
},

或使用 jquery：

chart: {
    renderTo: $('#container')[0]
},

【讨论】：

【解决方案4】：

只是不要在 HighCharts 中设置 height 属性，只要您在图表的包含元素上设置高度，它就会为您动态处理它。如果位置是绝对的，它可以是一个固定的数字，甚至是一个百分比。

默认情况下，高度是根据偏移高度计算的包含元素

#container {
    height:100%;
    width:100%;
    position:absolute;
}

【讨论】：

知道如何用条形图做到这一点吗？它不工作。查看演示：jsfiddle.net/a40a0bjy
我注意到了，谢谢。我真正想做的是让图表随着数据的增长而增长。使用 mt 演示，如果我有一个条，它会将其扩展为一个巨大的条，如果我有 100 个条，它们都会被挤压在一起。我想让页面增长并保持每个栏之间的填充。这是我的问题，还没有回应。 stackoverflow.com/questions/30868963/…
如果你不做绝对位置，而只是在包含的 div 上设置高度（通过 css），你需要高度：100%；宽度：内部容器上的 100% 样式？我有这样的
{chart rendering in here}
如果我没有设置 100%/100% chartContainer，HighCharts 似乎不服从并溢出。 jsfiddle.net/wkkAd/446
根据我的经验，这个答案实际上是不正确的。在 highcharts 中将宽度设置为 null 只会导致初始大小与容器匹配，但不会导致响应行为。

【解决方案5】：

删除高度将解决您的问题，因为如果您调整屏幕，highchart 的设计是响应式的，它也会重新调整大小。

【讨论】：

【解决方案6】：

也可以直接使用javascript的window.onresize

例如，我的代码（使用 scriptaculos）是：

window.onresize = function (){
    var w = $("form").getWidth() + "px";
    $('gfx').setStyle( { width : w } );
}

form 是我网页上的 html 表单，gfx 是高图图形。

【讨论】：

【解决方案7】：

如果你钩住了窗口调整大小事件怎么办：

$(window).resize(function() 
{    
    chart.setSize(
       $(document).width(), 
       $(document).height()/2,
       false
    );   
});

参见示例小提琴here。

Highcharts API 参考：setSize()。

【讨论】：