Highcharts - comment avoir un tableau avec une hauteur dynamique?

Question

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

Comment puis-je faire cela? J'ai essayé d'utiliser le gestionnaire d'événements chart.events.redraw pour redimensionner le graphique (en utilisant .setSize), mais je suppose que ça commence une boucle sans fin (gestionnaire d'événements d'incendie, qui appelle setSize, qui déclenche un autre gestionnaire d'événements, etc.).

Answer 1

Il suffit de ne définit pas la propriété de hauteur Highcharts et il traitera de façon dynamique pour vous aussi longtemps que vous définissez une hauteur sur l'élément contenant du graphique. Il peut être un nombre fixe ou même un pour cent si la position est absolue.

Highcharts docs :

Par défaut, la hauteur est calculée à partir du décalage en hauteur de la élément contenant

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

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

Answer 2

Que faire si vous accroché l'événement resize fenêtre:

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

Voir par exemple violon .

Highcharts API Référence:. setSize ()

Answer 3

Supprimer la hauteur résoudra votre problème car highchart est sensible à la conception si vous ajustez votre écran, il sera également re-size.

Answer 4

Vous pouvez utiliser directement javascript est window.onresize

A titre d'exemple, mon code (en utilisant scriptaculos) est:

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

Si la forme est un formulaire HTML sur ma page Web et GFX les graphiques highchart.

Answer 5

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

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

ou jquery:

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

Pour plus d'informations sont disponibles ici: https://api.highcharts.com/highstock/chart.renderTo

Answer 6

En utilisant pourcentage, la hauteur par rapport à elle et la largeur va changer de façon dynamique avec elle:

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

jsFiddle Highcharts avec hauteur de pourcentage