2
votes

Les valeurs vAxis de Google Chart ne s'affichent pas

Je travaille sur différents graphiques et j'affiche plusieurs graphiques sur une seule page. D'une manière ou d'une autre, les valeurs de vAxis ne sont pas affichées sur certains graphiques, mais elles s'affichent dans certains graphiques indépendants (nous pouvons dire que c'est dans une section différente et déclenchée manuellement).

J'ai essayé tout ce que je pouvais avoir.

var data = google.visualization.arrayToDataTable(window.item);
            let options = {
                width: 1410,
                height: 400,
                legend: {position: 'right'},
                bar: {groupWidth: '75%'},
                isStacked: true,
                vAxis: {
                    minValue: 0,
                    title: 'Count',
                    textStyle: {fontSize: 7}
                }
            };
            chart.draw(data, options);

javascript charts google-visualization

0 commentaires

4 Réponses :

5
votes

Très probablement, le conteneur du graphique est masqué lorsqu'il est dessiné.
il doit être rendu visible au préalable.

voir l'extrait de code de travail suivant, qui produit le même résultat.
le conteneur du graphique est masqué, puis affiché dans l'événement 'ready' du graphique.
par conséquent, les étiquettes vAxis sont manquantes.

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="hidden" id="chart_div"></div>

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    cols: [
      {label: 'x', type: 'string'},
      {label: 'y0', type: 'number'},
      {label: 'y1', type: 'number'},
      {label: 'y2', type: 'number'},
      {label: 'y3', type: 'number'},
    ],
    rows: [
      {c:[{v: 'Column 1'}, {v: 9145.6}, {v: 1000.4}, {v: 0}, {v: 900.4}]},
      {c:[{v: 'Column 2'}, {v: 8123.1}, {v: 0}, {v: 0}, {v: 0}]},
      {c:[{v: 'Column 3'}, {v: 7030.7}, {v: 200.3}, {v: 999.75}, {v: 0}]}
    ]
  });

  var options = {
    width: 1410,
    height: 400,
    legend: {position: 'right'},
    bar: {groupWidth: '75%'},
    isStacked: 'true',
    vAxis: {
      minValue: 0,
      title: 'Count',
      textStyle: {fontSize: 7}
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="hidden" id="chart_div"></div>

lorsque le conteneur est masqué, le graphique ne peut pas correctement dimensionner ou placer les éléments du graphique.
s'assurer que le graphique est visible avant de dessiner garantit un rendu correct.

voir l'extrait de travail suivant ...

.hidden {
  display: none;
  visibility: hidden;
}

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    cols: [
      {label: 'x', type: 'string'},
      {label: 'y0', type: 'number'},
      {label: 'y1', type: 'number'},
      {label: 'y2', type: 'number'},
      {label: 'y3', type: 'number'},
    ],
    rows: [
      {c:[{v: 'Column 1'}, {v: 9145.6}, {v: 1000.4}, {v: 0}, {v: 900.4}]},
      {c:[{v: 'Column 2'}, {v: 8123.1}, {v: 0}, {v: 0}, {v: 0}]},
      {c:[{v: 'Column 3'}, {v: 7030.7}, {v: 200.3}, {v: 999.75}, {v: 0}]}
    ]
  });

  var options = {
    width: 1410,
    height: 400,
    legend: {position: 'right'},
    bar: {groupWidth: '75%'},
    isStacked: 'true',
    vAxis: {
      minValue: 0,
      title: 'Count',
      textStyle: {fontSize: 7}
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    container.className = '';
  });
  chart.draw(data, options);
});

3 commentaires

Merci pour les notes détaillées, c'est ace. Je ne peux malheureusement pas utiliser cette solution, car les graphiques sont dans des onglets, donc non visibles au chargement. Pensez-vous qu'il existe un moyen de contourner cela?

oui, attendez que l'onglet s'affiche avant de dessiner le graphique pour la première fois. voici un exemple utilisant les onglets bootstrap -. Google Chart dans Bootstrap 3 Nav

Merci WhiteHat, cela a du sens, vraiment utile :)

0
votes

ajoutez une marge de gauche pour afficher l'axe y. Cela a fonctionné pour moi.

chartArea: { largeur: '100%', gauche: 100 },

0 commentaires

1
votes

J'ai eu le même problème - rien de ce qui précède n'a aidé. La seule chose qui a fonctionné a été de changer le paramètre de chargement 'current' en une version spécifique '45'

https://github.com/google/google-visualization-issues / issues / 2693

0 commentaires

0
votes

C'est un paramètre un peu idiot de Google Avant la version 45, il n'y avait pas de problème tant que vous définissiez correctement la largeur.

Par exemple: 'width': $ ('. tab-container'). width ()

Maintenant, même lorsque vous spécifiez manuellement la hauteur et la largeur du graphique, Google ne peut pas le calculer correctement, mais cela n'affecte que les libellés, pas le reste du graphique.

Dessiner le graphique sur le chargement des onglets est un peu pénible, car un autre changement récent a rendu plus important l'utilisation de google.charts.setOnLoadCallback () - sinon certains graphiques ne parviendront pas à s'afficher dans certains navigateurs en raison du timing de chargement de Google. / p>

La configuration manuelle vers la version 45 semble la meilleure solution pour les anciens graphiques sans réécrire tout le code.

0 commentaires