web-dev-qa-db-fra.com

tableau de visualisation google, taille en pourcentage

Comment définissez-vous la taille d'un graphique Google en pourcentage: J'ai ceci dans le html:

<div id="chart_div" width="90%" height="20%"></div>

et pas de largeur ni de hauteur dans les options du js.

Mais la taille du graphique ne s'adapte pas à la fenêtre d'affichage.

google-visualization
21
Louis

Tout d'abord, utilisez des styles pour définir vos dimensions, pas des attributs:

<div id="chart_div" style="width: 90%; height: 20%;"></div>

Le graphique dessine à la taille du div par défaut, mais les graphiques ne répondent pas. Vous devez accrocher un gestionnaire d'événements "redimensionner" à la fenêtre (ou à un autre élément si vous redimensionnez dans une fenêtre) qui redessine le graphique:

function resizeChart () {
    chart.draw(data, options);
}
if (document.addEventListener) {
    window.addEventListener('resize', resizeChart);
}
else if (document.attachEvent) {
    window.attachEvent('onresize', resizeChart);
}
else {
    window.resize = resizeChart;
}
25
asgallant

En multipliant avec le facteur approprié à $ (window) .width () ou $ (window) .height () dans les options du graphique

var options = {
        width: $(window).width(),
        height: $(window).height()*0.75
};
11
nole

Google vous recommande de styliser, comme la réponse ci-dessus, avec un CSS correct, ce qui rend un graphique moins glitch. Cependant, vous pouvez le dimensionner en Javascript ...
https://developers.google.com/chart/interactive/docs/basic_customizing_chart
Donc, pour les options lorsque vous dessinez le graphique (en utilisant chart.draw(data, options) comme ci-dessus) ...

var options = {
    width:400,
    height:300
}

Un bon violon pour un design réactif est ici ...
http://jsfiddle.net/toddlevy/pyAz5/

4
themrflibble
$(window).resize(function(){
    var container = document.getElementById("chart_div").firstChild.firstChild;
    container.style.width = "100%";

    chart.draw(data, options);
});
2
Janie B

Veuillez supprimer les propriétés width et height des options des scripts, puis ajouter le style suivant à votre page

<style>
    .chart {
        width: 100%;
        min-height: 450px;
    }

    .row {
        margin: 0 !important;
    }
</style>
0
Mohammad