Google Visualisation graphique à barres empilées: les couleurs et les étiquettes pour chaque valeur

Je suis en utilisant Google Visulaization API pour afficher un diagramme montrant une ligne unique avec plusieurs valeurs, comme ceci:
Google Visualisation graphique à barres empilées: les couleurs et les étiquettes pour chaque valeur

avec le code suivant:

var data = google.visualization.arrayToDataTable([
           ['', '0%', '25%', '50%', '75%', '100%', {role: 'annotation'}],
           ['Mood', 3, 7, 20, 25, 45, '']
    ]);

var options = {
    isStacked: true,
    hAxis: { minValue: 0 }
}

var chart = new google.visualization.BarChart(document.getElementById('mood_chart'));
chart.draw(data, options);

Maintenant, je voudrais personnaliser les couleurs et ajouter une étiquette à chaque élément de la ligne.

Si je fais ceci:

var data = google.visualization.arrayToDataTable([
    ['', '0%', '25%', '50%', '75%', '100%', {role: 'annotation'}, {role: 'style'}],
    ['Mood', 3, 7, 20, 25, 45, 'ABC', '#f50']
]);

Alors cela ne s'applique qu'à la dernière valeur: (notez que la légende a aussi de la bonne couleur)
Google Visualisation graphique à barres empilées: les couleurs et les étiquettes pour chaque valeur

Et si j'ai mis un tableau de chaînes de caractères au lieu d'une seule étiquette, une erreur est donnée.

Est-il possible de faire ce que je suis en train de faire? Comment?

J'ai une démo interactive pour cette réponse ici.
Ooops, qui devait démarrer une réponse.

OriginalL'auteur Alex | 2015-06-24

16

J'ai une démo interactive pour cette réponse ici.

La réponse est simple, l'annotation et le style des colonnes de la table de données s'appliquent à la colonne de données avant eux. Ajouter des colonnes d'annotation après chaque colonne de données pour ajouter des annotations à chaque valeur.

C'est aussi pourquoi les couleurs diffèrent à partir de votre légende. Pour appliquer des couleurs à une série vous faire à partir de votre objet d'options. Le rôle dans le style de la table de données affecte la valeur individuelle sans changer l'option pour l'ensemble de la série.
```
var data = google.visualization.arrayToDataTable([
  ['', '0%', {role: 'annotation'}, '25%', {role: 'annotation'},
    '50%', {role: 'annotation'}, '75%', {role: 'annotation'},
    '100%', {role: 'annotation'}],
  ['Mood', 3, 'ABC', 7, 'DEF', 20, 'GHI', 25, 'JKL', 25, 'MNO']
]);
```
D'assigner des couleurs manuellement vos options devrait ressembler à quelque chose comme ceci:
```
var options = {
  isStacked: true,
  hAxis: {
    minValue: 0
  },
  series: {
    0:{color:'#222'},
    1:{color:'#555'},
    2:{color:'#888'},
    3:{color:'#AAA'},
    4:{color:'#EEE'}
  }
};
```
Mes couleurs étaient tout simplement au hasard gris parce que je peux calculer les couleurs dans ma tête de cette façon. La série de l'indice est indépendant de la table de données de la colonne, de sorte qu'il attribue des index sur des colonnes avec des valeurs de données.

Ooooh merci! Pourriez-vous s'il vous plaît modifier la réponse et aussi ajouter le code pour les couleurs?
Je vais bricoler avec que, après le déjeuner. Je ne sais pas si la série de l'indice sera le même que l'index de colonne lorsque vous avez des annotations comme cela, donc je vais devoir l'essayer.
Bien sûr, merci beaucoup
Ajout de l'exemple de l'attribution d'une couleur à une série, et mise à jour de la gratter.
Fonctionne comme un charme! Merci pour cette réponse. Je cherchais une solution de ce genre! Bizarre que ce ne soit pas mentionné dans l'api Google chart de la documentation.

OriginalL'auteur nbering

Au cas où quelqu'un voudrait ajouter la couleur de la série de json, j'ai trouvé un moyen de le faire. Il a fallu un certain temps pour comprendre, pour moi donc voilà si quelqu'un peut l'utiliser.

Problème est que les tableaux de couleurs ne peut pas être de type Array, mais doit être l'objet avec les objets.

Récupérer les couleurs de Contrôleur (ASP.Net MVC):

/*array for colors to be convertet later*/
var mycolors = new Array();

function getColors() {
        var postData = {};
        postData.Ids = {1,2,3};
        $.ajax({
            type: "POST",
            url: "@Url.Action("GoogleStackedBarchartColors", "MyController")",
            data: postData,
            dataType: "text",
            success: function (d, status, request) {
            /*some logging*/
            console.log(d);
            console.log($.parseJSON(d));

            var colors = $.parseJSON(d);
            /*I change the Type to object*/
            mycolors.__proto__ = Object; /*The magic part*/
            var i = 0;
            colors.forEach(function (element) {
                mycolors[i] = element;
                i = i + 1;
            });

Puis dans les propriétés de la carte

var options = {

            width: '100%',
            height: 500,
            bar: { groupWidth: '75%' },
            bars: 'vertical',
            legend: { 'position': 'top', maxLines: 3 },
            isStacked: 'true',
            series: mycolors /*Here we have the object containing colors*/

        };

OriginalL'auteur Johnny Koch Petersen

Vous devez vous connecter pour publier un commentaire.