Highcharts - 如何创建具有动态高度的图表？ [英] Highcharts - how to have a chart with dynamic height?

问题描述

我想要一个可以调整浏览器窗口大小的图表，但问题是高度固定为400px。 这个JSFiddle示例有同样的问题。

I want to have a chart that resizes with the browser window, but the problem is that the height is fixed to 400px. This JSFiddle example has the same problem.

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

How can I do that? I tried using the chart.events.redraw event handler to resize the chart (using .setSize), but I guess it starts a never-ending loop (fire event handler, which calls setSize, which fires another event handler, etc.).

推荐答案

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

Just don't set the height property in HighCharts and it will handle it dynamically for you so long as you set a height on the chart's containing element. It can be a fixed number or a even a percent if position is absolute.

Highcharts文档：
$ b

Highcharts docs:

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

示例： http：// jsfiddle。 net / wkkAd / 149 /

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

这篇关于Highcharts - 如何创建具有动态高度的图表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！