Highcharts - 如何创建一个动态高度的图表？

Question

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

我该如何解决？我尝试使用chart.events.redraw事件处理程序来调整图表大小（使用.setSize），但我猜它启动了一个无休止的循环（触发事件处理程序，调用setSize，触发另一个事件处理程序，等等）。

- duality_

Answer 1

如果在HighCharts中不设置height属性，它会自动根据图表包含元素的高度进行动态处理。这个高度可以是一个固定数字或百分比（如果位置是绝对的）。

Highcharts文档:

默认情况下，高度从包含元素的偏移高度计算得出

示例: http://jsfiddle.net/wkkAd/149/

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

- tybro0103

---

有没有想法用柱状图来实现这个？不起作用。请看演示：http://jsfiddle.net/a40a0bjy/ - M H

我注意到了，谢谢。我真正想做的是让图表随着数据增长而增长。在我的演示中，如果我只有一个柱形图，则会将其扩展为巨大的柱形图，如果我有100个柱形图，则它们都被挤在一起。我希望使页面随着数据增长而增长，并保持每个柱状图之间的填充。这是我的问题，但还没有回复。http://stackoverflow.com/questions/30868963/highcharts-bar-chart-auto-height - M H

如果您不使用绝对定位，而只是通过CSS在包含的div上设置高度，那么在内部容器上是否需要设置height: 100%; width: 100%样式？我有类似这样的代码：<div style="height: 350px;"><div class="chartContainer">{图表在此处呈现}</div></div> 如果我不在chartContainer上设置100%/100%，HighCharts似乎不会遵守并溢出。http://jsfiddle.net/wkkAd/446/ - Terry

根据我的经验，这个答案实际上是不正确的。在highcharts中将宽度设置为null只会导致初始大小与容器匹配，但并不会导致响应式行为。 - user959690

Answer 2

如果你挂钩了窗口调整大小事件会发生什么：

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

请查看示例fiddle此处。

Highcharts API 参考：setSize()。

- Mark

---

我猜这个可以工作，但如果图表的宽度不是100％，则会失败。请参见此更改后的fiddle：http://jsfiddle.net/DdtsD/ - duality_

@duality_，如果你将图表重排选项设置为false，则它适用于宽度。请参见此处：http://jsfiddle.net/6MnFA/ - Mark

这应该被去抖处理。而且，这是不必要的：http://api.highcharts.com/highcharts#chart.height - tybro0103

Answer 3

使用百分比时，高度相对于宽度，并将随着宽度的动态更改而变化：

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

JSFiddle Highcharts 高度百分比示例

- Phil

Answer 4

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

- RAM

---

仅在初始加载时，它不会响应。 - user959690

Answer 5

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

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

或使用 jQuery：

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

更多信息可在此处找到： https://api.highcharts.com/highstock/chart.renderTo

- ill

Answer 6

或者，您可以直接使用JavaScript的window.onresize。

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

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

form是我网页上的一个html表单，gfx是highchart图形。

- destroyedlolo

Answer 7

我遇到了同样的问题，我通过以下方式解决了它：

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

即使我调整浏览器大小，图表也能完美适应。您可以根据需要更改百分比。

- Uriel Herrera