web-dev-qa-db-fra.com

Comment définir la largeur de la légende des graphiques Google en JavaScript?

Je génère ce graphique en courbes Google à l'aide de l'API Google JS. Comme vous pouvez le voir, les étiquettes sont très étroites. Comment faire pour que tout le texte de l'étiquette soit visible?

enter image description here

google-visualization
35
f.ardelian

Voici quelques exemples basés sur les graphiques de ligne de terrain de jeu de code Google . L'ajustement de l'option de largeur de la zone graphique donne plus d'espace pour les étiquettes:

new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {curveType: "function",
                width: 500, height: 400,
                vAxis: {maxValue: 10},
                chartArea: {width: '50%'}}
        );

Si c'est une option, vous pouvez également positionner les étiquettes sous le graphique, ce qui donne beaucoup plus d'espace:

new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {curveType: "function",
                width: 500, height: 400,
                vAxis: {maxValue: 10},
                legend: 'bottom'}
        );
41
oli

L'extension de l'option chartArea à une largeur de 100% a résolu le problème pour moi. Contrairement à la documentation, le chartArea inclut la légende. J'ai utilisé un graphique circulaire, mais la même option est disponible pour le graphique linéaire.

var options = {'title':title,'width':w,'height':h,'chartArea':{left:0,top:10,width:"100%"}};
var chart = new google.visualization.PieChart(document.getElementById(chartDiv));
chart.draw(data,options);

Référence .

19
Nettie

Aucune des réponses précédentes n'a bien fonctionné pour moi. Régler width sur moins de 100% centre la zone de traçage et laisse trop d'espace inutilisé sur la gauche. Le mettre à 100% n'est pas non plus une solution.

Ce qui a bien fonctionné - voir violon fonctionnant en direct - définit le à droite pour tenir compte de la légende, puis ajuster la à gauche valeur éventuellement, pour le titre et les étiquettes de l'axe Y. La zone de traçage largeur s'ajustera automatiquement entre ces deux marges fixes:

var options = {
   ...
   legend: { position: 'right' },
   chartArea: {
      right: 130,   // set this to adjust the legend width
      left: 60,     // set this eventually, to adjust the left margin
   },
   ...
};
6
Cristi S.

Il y a une option dans legend.textStyle nous pouvons personnaliser les styles de texte des légendes dans les graphiques Google

var options = {
                legend: { textStyle: { fontSize: 78  //size of the legend 
                } }
              }
2
Aravindh Gopi

Vous devez agrandir le graphique ou raccourcir vos étiquettes.

1
98374598347934875