jquery - Highchartsで高さのサイズを変更する

Question

ウィンドウのサイズが変更されたときに幅を美しく変更するHighchartがあります。しかし、高さではありません。この設定されたチャートサイズを試しましたが、うまく機能していません。ウィンドウのサイズが変更されたときに高さを自動的に変更する他の方法はありますか？

これは、出力用の私のcssコードです。Jquery UIタブがあり、もう1つのタブにデータテーブルが表示されています

#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..
    };
    //...
}

score 39 · Accepted Answer

ただし、 Ricardoの答えは正しいです。ブラウザウィンドウのサイズが変更されたときにコンテナのサイズが変更されないため、ハイチャート自体のサイズが変更されない場合があります。

これは常に機能します：

時限およびパイプライン化されたサイズ変更イベントリスナーを設定します。jsFiddleで500msの例
実際のサイズ変更機能で使用chart.setSize(width, height, doAnimation = true); して、高さと幅を動的に設定します
reflow: falsehighcharts-optionsで設定し、もちろん作成時heightにwidth明示的に設定します。独自のサイズ変更イベント処理を行うため、別のイベントでHighchartsフックを使用する必要はありません。

score 17 · Accepted Answer

APIリファレンスによると：

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

heightしたがって、イベントを使用して親divに従って制御できますredraw。このイベントは、サイズが変更されたときに呼び出されます。

参考文献

score 12 · Accepted Answer

コンテナの高さを明示的に設定する必要があります

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

他のStackoverflowの回答を見る

Highchartsドキュメント

score 1 · Accepted Answer

チャートがブートストラップモーダルポップアップ内にあることを除いて、高さに関して同様の問題がありました。これは、すでに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();
});

「ratio」が高さ/幅のアスペクト比になる場合、ブートストラップモーダルのサイズが変更されたときにサイズが変更されます。この測定は、モーダルが開いているときにのみ行われます。私は比率をグローバルとして保存していますが、それはおそらくベストプラクティスではありません。

$(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 );
    }       
});

したがって、これを使用すると、画面を横にドラッグして（サイズを変更して）、グラフのアスペクト比を維持できます。

ワイドスクリーン

対小さい

（まだvwユニットをいじっているので、後ろのすべてが小さすぎて読むことができません！）

jquery - Highchartsで高さのサイズを変更する

4 に答える 4

Related

Reference