使用Highcharts调整高度

我有一个Highchart，它可以在窗口更改大小时调整宽度。但不是高度。我试过这个设定的图表大小，但它不能精确地工作。当窗口更改尺寸时，是否有其他方法可以自动更改高度？使用Highcharts调整高度

这是我的输出的CSS代码。我有一个jQuery UI选项卡，其他选项卡显示了数据表

#output-container 
{ 
float: right; 
display: inline; 
position: absolute; 
right: 10px; 
left: 400px; 
top:120px; 
overflow-y: auto; 
}

这是我对chartdiv CSS：

#chartContainer{ 
margin: auto; 
}

这是JS图表功能：

function qchart(){ 

    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'chartContainer', 
      type: 'column', 
      spacingBottom: 3, 
      //height: (screen.availHeight)-500, 
      marginRight: 30, 
      marginBottom: 30, 
      reflow: true 
     }, 
     //etc.. 
    }; 
    //... 
}

来源

2012-12-07 Per

可能[Highcharts的重复 - 如何使用动态高度图表]（http://stackoverflow.com/questions/8809852/highc哈茨 - 如何对具有-A-排行榜与动态高度） –

对于调整隐藏图表和risize窗口 [见我的计算器答案] [1] [1]：HTTP： //stackoverflow.com/questions/16216722/highcharts-hidden-charts-dont-get-re-size-properly/25083192#25083192 – Davide

里卡多的答案是正确的，但：有时你可能会发现自己在一个情况下，容器简单地根据需要为不调整浏览器窗口更改大小，因此不允许高图自行调整大小。

总是有效：
1.设置定时和流水线调整大小事件侦听器。 Example with 500ms on jsFiddle
2.使用chart.setSize(width, height, doAnimation = true);在实际调整大小功能设置高度和highcharts选项动态宽
3.设置reflow: false，当然设置height和width明确地对创作。因为我们将会做我们自己的resize事件处理，所以不需要Highcharts挂钩另一个。

来源

2013-02-25 21:13:33 Philzen

我对图表和jQuery/javascript相当陌生，你可以给我一个代码示例以便遵循吗？ – newbie

根据API编号：

By default the height is calculated from the offset height of the containing element. Defaults to null.

因此，您可以根据父div使用redraw事件来控制它的height，该事件在其更改大小时调用。

参考

来源

2012-12-07 18:45:33

那么，为什么downvote？任何建议？ –

Sincerest道歉 - 我刚刚重新测试了这一点，它看起来如果你正确调整它实际工作的直接父容器。不能收回我的downvote（系统说“投票现在被锁定，除非帖子被编辑”），如果你编辑一两行，我一定会收回。 – Philzen

必须设置容器明确

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

See other stackoverflow answer

highcharts documentation

来源

2013-11-06 08:13:48

我曾与高度类似的问题，除了我的图表是一个引导模式弹出内部的高度，这是我”米已经控制与CSS的大小。但是，由于某些原因，当窗口水平调整大小时，图表容器的高度将无限扩大。如果你要前后拖动窗口，它将无限期地垂直扩展。我也不喜欢硬编码的高度/宽度解决方案。

因此，如果您使用模式操作，请将this solution与窗口大小调整事件结合使用。

// from link 
$('#ChartModal').on('show.bs.modal', function() { 
    $('.chart-container').css('visibility', 'hidden'); 
}); 

$('#ChartModal').on('shown.bs.modal.', function() { 
    $('.chart-container').css('visibility', 'initial'); 
    $('#chartbox').highcharts().reflow() 
    //added 
    ratio = $('.chart-container').width()/$('.chart-container').height(); 
});

其中“比率”变成高度/宽度宽高比时，您将在引导模式调整大小时调整大小。只有当他打开模式时才会进行此测量。我将存储比率视为全球性的，但这可能不是最佳做法。所以用这个

$(window).on('resize', function() { 
    //chart-container is only visible when the modal is visible. 
    if ($('.chart-container').is(':visible')) { 
     $('#chartbox').highcharts().setSize( 
      $('.chart-container').width(), 
      ($('.chart-container').width()/ratio), 
      doAnimation = true); 
    }  
});

，您可以拖动屏幕的一侧（调整其大小）和您的图表将保持其纵横比。

宽屏