web-dev-qa-db-fra.com

Redimensionner la hauteur avec Highcharts

J'ai un Highchart qui redimensionne la largeur de manière magnifique lorsque la fenêtre change de taille. Mais pas la hauteur. J'ai essayé cette taille de graphique définie, mais cela ne fonctionne pas correctement. Existe-t-il un autre moyen de modifier automatiquement la hauteur lorsque la fenêtre change de taille?

Ceci est mon code CSS pour la sortie. J'ai un onglet Jquery UI, l'autre onglet montre le datatable

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

Ceci est mon css pour le chartdiv:

#chartContainer{
    margin: auto;
}

Et voici la fonction 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

la réponse de Ricardo est correct, cependant: parfois vous pouvez vous retrouver dans une situation où le conteneur ne se redimensionne tout simplement pas comme vous le souhaitez lorsque la fenêtre du navigateur change de taille, ne permettant ainsi pas aux highcharts de se redimensionner.

Cela fonctionne toujours:

  1. Configurez un écouteur d'événement de redimensionnement chronométré et en pipeline. Exemple avec 500 ms sur jsFiddle
  2. utilisez chart.setSize(width, height, doAnimation = true); dans votre fonction de redimensionnement réelle pour définir dynamiquement la hauteur et la largeur
  3. Ensemble reflow: false dans les options highcharts et bien sûr, définissez height et width explicitement lors de la création. Comme nous allons faire notre propre gestion des événements de redimensionnement, il n'est pas nécessaire de crochets Highcharts dans un autre.
37
Philzen

Selon la référence API:

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

Ainsi, vous pouvez contrôler sa height en fonction de la div parent en utilisant l'événement redraw, qui est appelé quand il change sa taille.

Références

18
Ricardo Alvaro Lohmann

Vous devez définir explicitement la hauteur du conteneur

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

Voir autre réponse Stackoverflow

documentation Highcharts

13
Ronan Quillevere

J'ai eu un problème similaire avec la hauteur, sauf que mon graphique était à l'intérieur d'un bootstrap popup modal, dont je contrôle déjà la taille avec css. Cependant, pour une raison quelconque lorsque la fenêtre a été redimensionnée horizontalement, le la hauteur du conteneur de graphique augmenterait indéfiniment. Si vous faisiez glisser la fenêtre d'avant en arrière, elle s'élargirait indéfiniment verticalement. Je n'aime pas non plus les solutions codées en dur pour la hauteur/largeur.

Donc, si vous faites cela dans un modal, combinez cette solution avec un événement de redimensionnement de fenêtre.

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

Lorsque "ratio" devient un rapport hauteur/largeur, cela vous redimensionnera lorsque le modal bootstrap) sera redimensionné. Cette mesure n'est prise que lorsque le modal est ouvert. Je stocke le ratio en tant que global mais ce n'est probablement pas la meilleure pratique.

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

Donc, avec cela, vous pouvez faire glisser votre écran sur le côté (le redimensionner) et votre graphique conservera son rapport d'aspect.

Écran large

enter image description here

vs plus petit

enter image description here

(toujours bidouiller avec des unités vw, donc tout à l'arrière est trop petit pour lire lol!)

1
Lucretius