Faire de Google Gauge Chart réactive

Je voudrais créer des diagrammes Google Gauge qui devraient être compatibles avec le Web. J'ai entendu parler de définir la largeur à '100%' devrait fonctionner, mais il ne modifie pas réellement.

Ensuite, 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

Est-ce que quelqu'un sait comment rendre accessible le Web?

Les tableaux ne seront pas redimensionnés automatiquement. Vous devez configurer un gestionnaire d'événements qui appelle chart.draw(data, options); Sur le redimensionnement:

 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); } } 

Le réglage de height et de width à 100% dans les options ne fera rien pour vous. Vous devrez configurer ceux dans CSS pour votre div entre conteneurs:

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

Gardez à l'esprit quelques points: la hauteur de réglage à 100% ne fait rien à moins que l'élément parent ait une hauteur spécifique; De plus, la hauteur et la largeur d'une jauge sont déterminées par la plus petite des dimensions. Donc, si vous augmentez la taille de l'écran sans spécifier la hauteur du conteneur #test (ou son conteneur parent), le résultat probable est que le graphique ne changera pas la taille.

Vous pouvez simplement attribuer la largeur de 100% dans les options et une étiquette divive réactive avec width = "100%" ou cliquez ici pour accéder à 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%', };