web-dev-qa-db-fra.com

Highcharts - comment avoir un graphique avec une hauteur dynamique?

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

Comment puis je faire ça? J'ai essayé d'utiliser le gestionnaire d'événements chart.events.redraw pour redimensionner le graphique (en utilisant .setSize), mais je suppose qu'il démarre une boucle sans fin (fire event handler, qui appelle setSize, qui déclenche un autre gestionnaire d'événements, etc.).

javascripthighcharts
35
duality_

Ne définissez simplement pas la propriété height dans HighCharts et il la gérera dynamiquement pour vous tant que vous définissez une hauteur sur l'élément contenant le graphique. Il peut s'agir d'un nombre fixe ou même d'un pourcentage si la position est absolue.

Documents Highcharts :

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

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

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

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

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

Voir exemple violon ici .

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

25
Mark

Supprimer la hauteur résoudra votre problème car le graphique est réactif par conception si vous ajustez votre écran, il sera également redimensionné.

4
RAM

Une autre bonne option est de passer une référence HTML renderTo. S'il s'agit d'une chaîne, l'élément de 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

3
ill

Alternativement, vous pouvez utiliser directement window.onresize de javascript

Par exemple, mon code (en utilisant scriptaculos) est:

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

Où formulaire est un formulaire html sur ma page Web et gfx les graphiques highchart.

3
destroyedlolo

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

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

JSFiddle Highcharts avec pourcentage de hauteur

1
Phil