web-dev-qa-db-fra.com

Taille par défaut du graphique Google

J'ai un graphique Google défini sur 500px par 500px, mais qui retourne 400px par 200px. J'ai regardé le div, et il montre 500x500. Je n'ai aucune raison pour laquelle le graphique revient à 400x200. la div affiche 500x500, mais la boîte rectangulaire SVG affiche 400x200, ce qui rend toutes les images plus petites.

Y a-t-il un paramètre que je ne connais pas?

<div class="span5">
<div id="qual_div" style="border:1px black solid;margin:0px;padding:0px;height:500px;width:500px"></div>
</div>
    <script type="text/javascript">
  var data, options, chart;
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    data = google.visualization.arrayToDataTable([
      ['Qual', 'Stat'],
      ['Patient Satisfaction',     {{ $stats->attributes['sa_ptsatisfaction'] }}],
      ['Medical Knowledge',      {{ $stats->attributes['sa_medknowledge'] }}],
      ['ER Procedural Skills',  {{ $stats->attributes['sa_erprocskills'] }}],
      ['Nurse Relationship Skills', {{ $stats->attributes['sa_nrsrltnshpskls'] }}],
      ['Speed',    {{ $stats->attributes['sa_speed'] }}],
      ['Compassion',    {{ $stats->attributes['sa_compassion'] }}],
      ['EMR Utilization Skills',    {{ $stats->attributes['sa_emr'] }}],
      ['Profession Teamwork Skills',    {{ $stats->attributes['sa_proftmwrkskills'] }}]
    ]);

    options = {
      title: 'My Daily Activities'
      ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
    };

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

  function adjustChart(nm, vl) {
    for (var r=0; r<data.D.length; r++) {
      if (data.D[r].c[0].v == nm) {
        data.D[r].c[1].v = parseInt(vl);
        break;
      }
    }
    chart.draw(data, options);
  }
</script>
google-visualization
19
arcee123

Il existe plusieurs façons de définir la taille d'un graphique.

La première consiste à définir la taille de l'élément qui le contient. Le graphique prendra par défaut la largeur et la hauteur de l'élément contenant ( voir la documentation de Google Visualization pour les valeurs par défaut de hauteur/largeur ).

La seconde consiste à ne pas définir la taille réelle de l'élément et à définir la hauteur/largeur du graphique à 500 pixels chacune manuellement en ajoutant celles-ci à vos options:

options = {
  title: 'My Daily Activities'
  ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
  ,height: 500
  ,width: 500
};

Ce que vous faites réellement dans votre code, c'est la définition de la taille du graphique lui-même (et non de l'élément graphique global avec les axes, les étiquettes et la légende). Cela entraînera la zone de traçage du graphique à devenir 500px par 500px si vous pointez sur la div appropriée comme indiqué par @ Dr.Molle dans les commentaires.

En supposant que vous ne vouliez pas cela, vos nouvelles options seraient:

options = {
  title: 'My Daily Activities'
  ,height: 500
  ,width: 500
};
34
jmac

Donc, définir la hauteur et la largeur comme dans la réponse de jmac fonctionne, mais si vous le souhaitez réactif il y a des choses supplémentaires que je devais faire.

Mais juste pour sauvegarder une seconde, la raison pour laquelle j'ai ce problème en premier lieu est: Le div dans lequel ce graphique s'affiche est non visible lorsque la page se charge.

Comme vu ici, la largeur du graphique caché est incorrect 400 par 200: jsfiddle.net/muc7ejn3/6/

Comme vu ici, la largeur du graphique caché est Correct: jsfiddle.net/muc7ejn3/7/

Une autre façon de le faire est de simplement masquer le graphique juste avant l'appel de chart.draw (), puis de le masquer à nouveau, quelque chose comme:

tempShowChart();
chart.draw(view, options);
hideChartAgain();

Cela ne gère pas la fenêtre en cours de redimensionnement.

0
Nick Timmer