Google (graphique) de Visualisation: affichage de la valeur dans la légende

J'ai ajouté un Google Visualisation graphique à ma page. Tout fonctionne très bien et je n'ai pas de problème à les personnaliser avec les options prédéfinies. Cependant, il n'y a pas une option pour afficher les valeurs dans la légende au lieu de pourcentages, seulement dans les tranches d'eux-mêmes ou sur le hover info-bulle.

J'aimerais afficher les valeurs dans la légende et les pourcentages dans les tranches (le dernier je peux le faire via les options).

Pour un point de bonus... puis-je ajouter "MW" sur la fin de l'valeurs c'est à dire 145WM est sortie plutôt que de seulement 145.

Mon tableau actuel du code: http://pastebin.com/4JJdpxKx

Je suis sûr que c'est évident, mais les données sont portés de façon dynamique.

OriginalL'auteur lotech | 2013-11-14

1

La seule façon d'ajouter de la valeur à la légende est de changer les valeurs ou les valeurs mises en forme de l'étiquette de données de la colonne, ce qui permettra également de modifier les étiquettes dans les info-bulles.

Ajoutant "MW" à la fin de votre nombre est facile: il suffit d'utiliser un NumberFormatter:
```
//format column 1 as "1,234 MW"
var formatter = new google.visualization.NumberFormat({pattern: '#,### MW'});
formatter.format(data, 1);
```
Merci pour la réponse. L'ajout MW a parfaitement fonctionné, merci beaucoup pour ça! Ajouter des valeurs à la légende semble hors de ma portée pour le moment, il semblerait. Dans ce cas, je voudrais masquer les valeurs, mais de garder les noms des tranches si cela a du sens (dans l'image ci-dessous, de masquer le %age mais garder le nom du pays). Ne semblent pas avoir l'option pour que ce soit :/ Enfin, il y a un étrange alignement de bug... img707.imageshack.us/img707/8076/36wq.png. Vous pouvez le voir, pour la France, la valeur de la diapositive. Ne semble pas possible de l'aligner correctement que le reste ne.
Vous ne pouvez pas désactiver les pourcentages lors de l'utilisation du réglage de l' legend.position option pour 'labelled' (c'est bizarre, je sais). L'alignement des questions comme celle que vous voyez avec la France sont généralement dus à l'une des deux choses: soit une mauvaise chargement de l'API ou le dessin, le graphique à l'intérieur d'un div caché. À partir du code que vous mettez sur Pastebin, il ne ressemble pas à l'un ou l'autre cas s'applique à vous. Vous êtes la deuxième personne dans le passé quelques jours pour signaler un problème comme ça. Dans les autres cas, le problème d'alignement était présent seulement dans le Chrome, et seulement pour certains utilisateurs (je ne pouvais pas reproduire moi-même). cont...
Je suggère le dépôt d'un rapport de bug ici: code.google.com/p/google-visualization-api-issues/issues/list. Inclure le code qui reproduit le problème pour vous (un lien vers votre Pastebin est bien si ce code expose le problème) et comme beaucoup de détails sur votre environnement local que vous pouvez fournir (système d'exploitation, les navigateurs utilisés [avec les numéros de version]).
Salut Asgallant. Encore une fois, merci beaucoup pour la réponse. Une chose qui est intéressant à propos de l'alignement bug... il est présent sur Google Visualisation des diagrammes à secteurs de la page, voir la capture d'écran: img855.imageshack.us/img855/8324/7ger.png. Je peux confirmer ce qui est présent dans Chrome sous mac OS x Mountain Lion, mais pas Firefox ou Safari pour moi (voudrais savoir comment cela fonctionne, sûrement, c'est testé plus en Chrome!). Je vais soumettre un rapport de bogue pour le lien que vous avez posté 🙂
Rapport de Bug soumis: code.google.com/p/google-visualization-api-issues/issues/...

OriginalL'auteur asgallant
17

Il est difficile de trouver de la documentation appropriée pour Google Charts, et ma plus grande crainte est que parce qu'il n'est pas documenté, il peut être enlevé à tout moment, mais cela devrait faire ce que vous voulez:
```
chart1.options = {
    .
    .
    .
    pieSliceText: 'value',
    legend: {
        position: 'labeled',
        labeledValueText: 'both',
        textStyle: {
            color: 'blue', 
            fontSize: 14
        }
    }
};
```
pour le pieSliceText et labeledValueText j'ai utilisé avec succès les options:
```
 value
 both
 none
 percent
```
Cependant, je ne suis pas sûr % car j'obtiens le même résultat si j'utilise une ordure mot. Comme pour pieSliceText il semble qu'il n'accepte pas la valeur les deux. Aussi, aucun n'est pas reconnu sur le labeledValueText.

Ainsi, afin d'être sûr que vous aurez à essayer les différentes combinaisons. Personnellement, j'aurais aime avoir les deux sur le pieSliceText, mais le faire sur l'étiquette de légende est assez bon pour moi.

C'est dommage que Google Charts le manque de cohérence dans leurs options, mais ce pourrait être parce qu'ils ne veulent pas de continuer à les soutenir. C'est d'autant plus regrettable que, si la fixation de ceux-ci existent, il est presque impossible à trouver.

merci beaucoup pour cette réponse. Je ne pouvais vraiment pas trouver ces options de légende dans zoogle de la documentation.

OriginalL'auteur cpu

vous devez créer des variables dynamiquement et extrait les données.

var legendValue = 100;
var legendText1= 'legend1' + legendValue;

data.addRows([[legendText1,legendValue],[],[]])

OriginalL'auteur arn-arn

Utiliser en dessous de réglage

legend: { position: 'labeled', labeledValueText: 'none'}

Et le code ci-dessous pour personnaliser le texte de la légende

var total = 0;
for (var i = 0; i < dataPie.getNumberOfRows(); i++) {
    total = total + dataPie.getValue(i, 1);
}

for (var i = 0; i < dataPie.getNumberOfRows(); i++) {
    var label = dataPie.getValue(i, 0);
    var val = dataPie.getValue(i, 1);
    var percentual = Math.round(((val / total) * 100));
    dataPie.setFormattedValue(i, 0, label + ' - ' + ' (' + percentual + '%)');
}

OriginalL'auteur Kishore Chivukula

Vous devez vous connecter pour publier un commentaire.