Highcharts - comment avoir un graphique avec dynamique de la hauteur?

Je veux avoir un graphique qui redimensionne la fenêtre du navigateur, mais le problème est que la hauteur est fixée à 400px. Cette JSFiddle exemple a le même problème.

Comment puis-je le faire? J'ai essayé en utilisant le graphique.les événements.redessiner gestionnaire d'événement pour redimensionner le graphique (à l'aide .setSize), mais je suppose qu'il commence une boucle sans fin (feu gestionnaire d'événements, qui appelle setSize, ce qui déclenche un autre gestionnaire d'événements, etc.).

InformationsquelleAutor duality_ | 2012-01-10
  1. 47

    Il suffit de ne pas définir la propriété height de HighCharts et il va la traiter de façon dynamique pour vous aussi longtemps que vous définissez une taille sur le tableau contenant l'élément. Il peut être un nombre fixe ou un même un pour cent si la position est absolue.

    Highcharts docs:

    Par défaut, la hauteur est calculée à partir de l'offset de la hauteur de la
    contenant l'élément

    Exemple: http://jsfiddle.net/wkkAd/149/

    #container {
    height:100%;
    width:100%;
    position:absolute;
}
    • Une idée de comment faire cela avec un graphique à barres? il ne fonctionne pas. Voir démo: jsfiddle.net/a40a0bjy
    • votre règle CSS eu la mauvaise id. jsfiddle.net/a40a0bjy/3
    • J'ai remarqué que grâce. Ce que je suis vraiment essayer de faire c'est d'avoir le tableau de croître comme elle l'a données. Avec mt démo si j'en ai un bar, il augmente à un immense bar et si j'ai 100 bars, ils sont tous compressés ensemble. Je veux faire la page de croître et de maintenir l'espacement entre chaque barre. voici ma question sans réponse encore. stackoverflow.com/questions/30868963/...
    • Si vous ne faites pas la position absolue, mais juste réglage de la hauteur sur une div contenant (via css), vous avez besoin de la hauteur: 100%; width: 100% styles à l'intérieur d'un conteneur? J'ai quelque chose comme ceci <div style="height: 350px;"><div class="chartContainer">{graphique affiché ici}</div></div> Si je ne cherche pas à 100%/100% sur le chartContainer, le HighCharts ne semble pas obéir et de débordements. jsfiddle.net/wkkAd/446
    • Cette réponse est en fait incorrect dans mon expérience. Réglage de la largeur à la valeur null dans highcharts aura pour conséquence que la taille initiale de match le conteneur, mais ne conduisent pas à des comportement réactif.
    InformationsquelleAutor tybro0103
  2. 25

    Que faire si vous avez accroché à la fenêtre de l'événement de redimensionnement:

    $(window).resize(function() 
{    
    chart.setSize(
       $(document).width(), 
       $(document).height()/2,
       false
    );   
});

    Voir l'exemple de violon ici.

    Highcharts de Référence de l'API : setSize().

    • Je suppose que cela fonctionne, mais il ne parvient pas pour la largeur du graphique si c'est différent de 100%. Voir ce qui a changé violon: jsfiddle.net/DdtsD
    • il travaille pour la largeur si vous définissez le graphique de redistribution option à false. Voir ici: jsfiddle.net/6MnFA
    • C'est ça, merci.
    • Cela devrait être sans rebond. Aussi, il est inutile: api.highcharts.com/highcharts#chart.height
    InformationsquelleAutor Mark
  3. 4

    Supprimer la hauteur sera de résoudre votre problème parce que highchart est adaptée en dessin si vous réglez votre écran, il sera également re-taille.

    • Seulement sur la charge initiale, il ne sera pas sensible.
    InformationsquelleAutor RAM
  4. 3

    Sinon, vous pouvez directement utiliser le javascript de la fenêtre.onresize

    À titre d'exemple, mon code (à l'aide de scriptaculos) est :

    window.onresize = function (){
    var w = $("form").getWidth() + "px";
    $('gfx').setStyle( { width : w } );
}

    Lorsque le formulaire est un formulaire html sur ma page web et gfx l'highchart graphiques.

    InformationsquelleAutor destroyedlolo
  5. 2

    Une autre bonne option est de passer un renderTo HTML de référence.
    Si c'est une chaîne, l'élément par cet id est utilisé.
    Sinon vous pouvez faire:

    chart: {
    renderTo: document.getElementById('container')
},

    ou avec jquery:

    chart: {
    renderTo: $('#container')[0]
},

    De plus amples informations peuvent être trouvées ici:
    https://api.highcharts.com/highstock/chart.renderTo

    InformationsquelleAutor ill
  6. 1

    Lors de l'utilisation d'un pourcentage, de la hauteur par rapport à la largeur et de modifier dynamiquement avec elle:

    chart: {
    height: (9 / 16 * 100) + '%' //16:9 ratio
},

    JSFiddle Highcharts avec le pourcentage de la hauteur

    InformationsquelleAutor Phil