web-dev-qa-db-fra.com

Centre Alignement des graphiques Google

J'essaie de centrer mon graphique Google mais je n'ai pas réussi à le faire. J'ai joué avec un rembourrage pour le déplacer vers le centre, mais je ne veux pas rester là et jouer avec firebug pendant longtemps pour trouver la bonne position. Existe-t-il des méthodes plus simples, telles que l’alignement du texte text-align: center. Évidemment, cela ne fonctionne pas avec les graphiques Google. (Je suis novice pour tout cela)

var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));

...some code ...

    <div id='chart_div' style='width: 900px; height: 400px;'></div>

bien que j'ai fait ceci padding-left: 140px mais y at-il une meilleure manière comme align: center

htmlcsspositioninggoogle-visualization
11
SherCoder

Donnez le chart_div: display: block et le margin: 0 auto;

15
Robert Niestroj

Vous pouvez également faire <div id='chart_div' align='center'>. Cela a fonctionné pour moi, bien que ma fonction de survol de graphique ne fonctionne plus. Quelqu'un d'autre a ce problème? Je parle de survoler un point du graphique avec la souris. Il montre généralement le point tel que Jan Sales 440. Quelqu'un sait d'un correctif?

7
user1504583

J'ai été confronté au même problème avec une jauge Google. En vérifiant le code généré, je me suis rendu compte que la chose suivante dans le <div id='chart_div'> est une table avec une marge 0 définie comme style en ligne.

Donc, pour le remplacer, j'ai utilisé le css suivant:

div.chart_div table {
    width: auto;
    margin: 0 auto !important;
}

Et cela a fonctionné.

6
thanassis

La réponse acceptée est cassée; vous devez utiliser display: inline-block pour centrer votre graphique.

6
Mich. Gio.

Puisque width est corrigé, essayez de définir margin-left et margin-right sur auto. Cela devrait fonctionner en supposant que la position est relative.

1
Soufiane Hassou

Aucune de ces réponses ne fonctionne pour moi alors j'ai fait ça:

<div class="chart_box">
  <div id="chart_div" style='width: 900px; height: 400px;'></div>
</div>

.chart_box {
  width: 900px;
  margin: 0 auto;
}

Vous devez utiliser la même largeur pour chart_div et chart_box.

0
Mimoid

Abonnez-vous à l'événement ready pour modifier le CSS avec JavaScript. Quelque chose comme ci-dessous fera l'affaire.

google.charts.load('current', {
  'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', 80],
    ['CPU', 55],
    ['Network', 68]
  ]);

  var guageOptions = {
    width: 400,
    height: 120,
    redFrom: 90,
    redTo: 100,
    yellowFrom: 75,
    yellowTo: 90,
    minorTicks: 5
  };

  var guage = new google.visualization.Gauge(document.getElementById('my-div'));

  // HERE'S HOW TO SUBSCRIBE TO THE EVENT
  google.visualization.events.addListener(guage, 'ready', resetTableStyle);

  guage.draw(data, guageOptions);

  // HERE'S THE JAVASCRIPT TO SET YOUR CSS
  // NOTE TOGGLING A CSS CLASS HERE IS PROBABLY CLEANEST
  function resetTableStyle(){
    var myDiv = document.getElementById('my-div');
    var myTable = myDiv.getElementsByTagName('table')[0];
    myTable.style.margin = 'auto';
  }
0
Ron Royston

J'ai combiné quelques réponses ici, comme suit:

Créez une classe css:

.customChartStyle{
    border:1px solid #eee;
    text-align:center !important;
}

et l'ajouter aux cellules de la table en ajoutant ce qui suit à mon appel table.draw ():

'allowHtml': true, 'cssClassNames': {'tableCell': 'customChartStyle'}}

Je suis nouveau dans Google Graphiques mais la clé pour moi était d'ajouter! Important au style d'alignement de texte (merci thanassis). Pour mon cas, j'avais besoin du style de bordure, car le remplacement du style de table, supprime le cas contraire. De plus, je préfère définir la classe et laisser l’application graphique api l’appliquer au lieu de remplacer les styles générés par l’API.

0
nvioli