Zmień rozmiar wysokości z Highcharts

Question

Mam Highchart, który zmienia szerokość beatuifully po zmianie rozmiaru okna. Ale nie wysokość. Próbowałem tej wielkości zestawu, ale nie działa ona w sposób próbny. Czy istnieje inny sposób automatycznej zmiany wysokości podczas zmiany rozmiaru okna?

To jest mój kod css dla danych wyjściowych. Mam kartę jQuery UI, druga karta jest przedstawiający DataTable

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

To jest mój css dla chartdiv:

#chartContainer{ 
margin: auto; 
} 

I to jest funkcja Wykres 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.. 
    }; 
    //... 
} 

Answer 1

odpowiedź Ricarda jest prawidłowe, jednakże: czasami może znaleźć się w sytuacji, w której pojemnik po prostu nie zmienić rozmiar dowolnie jako okno przeglądarki zmienia rozmiar, nie dopuszczając do zmiany wielkości samego High Boards.

To zawsze działa:
1. Skonfiguruj terminarz i potokowy detektor zdarzeń zmiany rozmiaru. Example with 500ms on jsFiddle
2. Zastosowanie chart.setSize(width, height, doAnimation = true); na aktualnej funkcji zmiany rozmiaru, aby ustawić wysokość i szerokość dynamicznie
3. Ustaw reflow: false w highcharts-opcji i oczywiście ustawić height i width jawnie na stworzeniu. Ponieważ będziemy wykonywać własne operacje zmiany rozmiaru, nie ma potrzeby, aby Highcharts przechwytywało się w innym.

Answer 2

Zgodnie z opisem interfejsu API:

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

Można więc kontrolować jego numer height zgodnie z elementem nadrzędnym div przy użyciu zdarzenia redraw, które jest wywoływane, gdy zmienia jego rozmiar.

Referencje

• http://api.highcharts.com/highstock#chart.height
• http://api.highcharts.com/highstock#chart.events.redraw

Answer 3

Musisz ustawić wysokość pojemnika wyraźnie

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

See other stackoverflow answer

highcharts documentation

Answer 4

miałem podobny problem z wysokości wyjątkiem mój wykres był wewnątrz bootstrap modalnego popup, co ja” m już kontroluje rozmiar z css. Jednak z jakiegoś powodu, gdy okno zmieniło rozmiar w poziomie, wysokość kontenera wykresu rozszerzyłaby się w nieskończoność. Jeśli przeciągnąłbyś okno w tył i w przód, byłby on rozwijany pionowo w nieskończoność. Nie lubię też rozwiązań o sztywnej wysokości i szerokości.

Tak więc, jeśli robisz to w sposób modalny, połącz this solution ze zdarzeniem zmiany rozmiaru okna.

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

Gdzie „stosunek” staje się/szerokość proporcje wysokości, że będzie zmiana rozmiaru, gdy bootstrap modalne zmienia rozmiar. Ten pomiar jest wykonywany tylko wtedy, gdy modal jest otwarty. Przechowuję stosunek jako globalny, ale to chyba nie najlepsza praktyka.

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

Dzięki temu można przeciągnąć ekran na bok (zmiana rozmiaru), a wykres zachowa proporcje.

Widescreen

vs mniejszy

(nadal błahy wokół z jednostek VW, więc wszystko z tyłu jest zbyt mała, aby czytać lol!)