jquery www 使用Highcharts調整高度




line chart highchart (4)

我有一個Highchart,當窗口改變大小時,可以調整寬度。 但不是高度。 我試過這個設定的圖表大小,但它不能正常工作。 當窗口改變大小時,有沒有其他方法可以自動改變高度?

這是我的輸出的CSS代碼。 我有一個JQuery UI標籤,另一個標籤顯示數據表

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

這是我的圖表CSS的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..
    };
    //...
}


我有一個高度類似的問題,除了我的圖表是一個引導模式彈出窗口內,我已經控制與CSS的大小。 但是,由於某種原因,當窗口水平調整大小時,圖表容器的高度將無限擴大。 如果你要來回拖動窗口,它將無限期地垂直擴展。 我也不喜歡硬編碼的高度/寬度解決方案。

所以,如果你用模式來做這個,把這個解決方案與一個窗口大小調整事件結合起來。

// 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 );
    }       
});

所以用這個,你可以把你的屏幕拖到一邊(調整它的大小),你的圖表將保持其縱橫比。

寬屏

vs更小

(仍然擺弄著vw單位,所以後面的一切都太小,不能讀取哈哈!)


但是,里卡多的回答是正確的:有時您可能會發現自己處於容器根本無法根據需要調整大小的情況,因為瀏覽器窗口會更改大小,因此不允許高圖形自行調整大小。

這總是有效的:
1.設置定時和流水線的resize事件偵聽器。 在jsFiddle上使用500ms的例子
2.使用chart.setSize(width, height, doAnimation = true); 在你的實際調整大小功能動態設置高度和寬度
3.在highcharts-options中設置reflow: false ,當然在創建時明確地設置heightwidth 。 因為我們將會做我們自己的resize事件處理,所以不需要Highcharts掛鉤另一個。






highcharts