使用Highcharts调整高度-Java 学习之路

我有一个Highchart，当窗口改变大小时，它会大大调整宽度 . 但不是高度 . 我尝试了这个设定的图表大小，但它不能正常工作 . 当窗口改变大小时，有没有其他方法可以自动更改高度？

这是我输出的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 Chart函数：

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

4 回答

1
Ricardo's answer是正确的，但是：有时您可能会发现自己处于这样的情况：容器根本不会随着浏览器窗口的大小改变而调整大小，因此不允许高图调整自身大小 .

这始终有效：
- 设置定时和流水线调整大小事件侦听器 . Example with 500ms on jsFiddle
- 在实际的调整大小函数中使用chart.setSize(width, height, doAnimation = true);来动态设置高度和宽度
- 在highcharts-options中设置 reflow: false ，当然在创建时明确设置 height 和 width . 因为我们'll be doing our own resize event handling there'不需要Highcharts挂钩另一个 .
回复于 2024-05-02T11:15:14+08:00
17
根据API参考：

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

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

参考
- http://api.highcharts.com/highstock#chart.height
- http://api.highcharts.com/highstock#chart.events.redraw
回复于 2024-05-02T11:15:14+08:00
12
您必须明确设置容器的高度
```
#container {
    height:100%;
    width:100%;
    position:absolute; 
}
```
See other Stackoverflow answer

Highcharts documentation
回复于 2024-05-02T11:15:14+08:00
33
我有一个类似的高度问题，除了我的图表是在一个bootstrap模式弹出窗口，我已经控制了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();
});
```
如果“ratio”变为高度/宽度宽高比，那么当bootstrap模式调整大小时，您将调整大小 . 仅在模态打开时才进行此测量 . 我将比率存储为全球，但这可能不是最佳做法 .
```
$(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 );
    }       
});
```
因此，您可以将屏幕拖到一边（调整大小），图表将保持其宽高比 .

宽屏

vs较小

（仍然摆弄vw单位，所以后面的一切都太小了，不能阅读大声笑！）
回复于 2024-05-02T11:15:14+08:00

使用Highcharts调整高度

4 回答

相关问题