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

Highcharts - how to have a chart with dynamic height?

本文关键字：高度 动态 拥有 何拥有 Highcharts-      更新时间：2023-09-26

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

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

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

Highcharts文档：

默认情况下，高度是根据含有元素

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

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

如果您钩住了窗口大小调整事件：

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

请参阅此处的小提琴示例。

Highcharts API参考：setSize（）。

使用百分比时，其高度相对于宽度，并将随其动态变化：

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

具有百分比高度的JSFiddle Highcharts

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

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

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

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

其中表单是我网页上的html表单，gfx是highchart图形。

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

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

或者使用jquery：

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

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

我遇到了同样的问题，我用解决了它

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

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

相关文章：