Faire Google Chart Jauge sensible

Je voudrais créer un Google Jauge de graphiques, qui devrait être web-responsive.
J'ai entendu parler de réglage de la largeur de '100%' devrait fonctionner, mais il ne fait pas faire des changements.

Ci-dessous, vous pouvez voir mon code.

<script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Happiness', 40],

        ]);

        var options = {
          width: '100%', height: '100%',
          redFrom: 0, redTo: 40,
          yellowFrom:40, yellowTo: 70,
          greenFrom: 70, greenTo: 100,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('test'));
        chart.draw(data, options);
      }
    </script>

Veuillez voir mon exemple .Exemple De Test

Personne ne sait comment faire web-responsive?

OriginalL'auteur joelschmid | 2013-09-24

  1. 17

    Les graphiques ne redimensionne pas automatiquement. Vous devez mettre en place un gestionnaire d'événement qui appelle chart.draw(data, options); sur redimensionner:

    function drawChart () {
    var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Happiness', 40]
    ]);

    var options = {
        redFrom: 0,
        redTo: 40,
        yellowFrom:40,
        yellowTo: 70,
        greenFrom: 70,
        greenTo: 100,
        minorTicks: 5
    };

    var chart = new google.visualization.Gauge(document.getElementById('test'));
    chart.draw(data, options);

    function resizeHandler () {
        chart.draw(data, options);
    }
    if (window.addEventListener) {
        window.addEventListener('resize', resizeHandler, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onresize', resizeHandler);
    }
}

    Réglage height et width à 100% dans les options ne fera rien pour vous. Vous aurez besoin de la mettre dans le CSS de votre conteneur div:

    #test {
    height: 100%;
    width: 100%;
}

    Garder à l'esprit quelques choses: réglage de la hauteur jusqu'à 100% de ne rien faire, à moins que le parent de l'élément a une hauteur spécifique; aussi, la hauteur et la largeur d'une Jauge sont déterminés par la plus petite des dimensions. Donc, si vous augmentez la taille de l'écran, sans préciser la hauteur du conteneur #test (ou du conteneur parent), le résultat probable est que le graphique ne change pas de taille.

    Le problème de certains paramètres dans le .fichier css... Après la mise à un '100%' tout a fonctionné 🙂 Merci!

    OriginalL'auteur asgallant

  2. 0

    Vous pouvez tout simplement affecter la largeur de 100% dans les options et un réactif balise div avec width="100%" ou va ici violon lien où vous pouvez voir la démo en direct.

    //html ici

     <div class="row"> 
   <div class="col-xs-12 col-sm-6">
    <div id="chart_div"></div>
  </div>
 </div>

    //js ici

     var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':'100%',
                  };
    Réglage de la largeur à 100% " dans les options ne fonctionne pas !! voir doc pour cette.

    OriginalL'auteur