web-dev-qa-db-ja.com

ハイチャートで高さを変更する

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

これは出力用の私の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..
    };
    //...
}
jquerycsshighcharts
19
Joe

Ricardoの答え は正しいですが、ブラウザウィンドウのサイズが変更されると、コンテナーのサイズが希望どおりに変更されず、ハイチャートのサイズを変更できない場合があります。

これは常に機能します：

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

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

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

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

参考文献

18
Ricardo Alvaro Lohmann

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

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

他のStackoverflowの回答を参照

Highchartsドキュメント

13
Ronan Quillevere

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

「比率」が高さ/幅のアスペクト比になる場合、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 );
    }       
});

そのため、画面を横にドラッグ（サイズ変更）すると、グラフのアスペクト比が維持されます。

ワイドスクリーン

enter image description here

対小さい

enter image description here

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

1
Lucretius