ColumnChart colonne de visualisation google changement de couleur

Question

Quelqu'un sait si je peux pirater la visualisation de Google ColumnChart api graphique en quelque sorte, de faire une seule colonne se démarquer avec une couleur différente, comme suit:

Je sais que vous pouvez le faire avec ImageChart, donc je ne ai pas besoin que (il déclenche aucun événement et n'a pas x / y étiquettes).

Puis-je traverser le résultat avec javascript et en quelque sorte changer le style CSS, si elle est vraiment rendu en SVG?

Answer 1

Eh bien en utilisant jQuery j'ai pu me rendre à mon iframe pour le graphique. Ce n'est pas jolie, mais cela fonctionne. Il est aussi plus court que d'utiliser le prototype:

$('#google-chart iframe').contents().find("#chartArea g>g>rect")[2].attributes['5'].value = "#eea746";                                         

Dans le code attributs ci-dessus [ '5'] se réfère à l'attribut "remplissage" de l'objet rect.

Answer 2

Un hack vraiment pas cher (qui fonctionne très bien) est la suivante:

Dans les options de votre graphique, faites: isStacked (true);

passer des données dans deux séries distinctes: celle qui est nul partout sauf à la barre de hors-couleur, et qui est seulement zéro à la barre hors de couleur. Les barres « empilées » donnent juste l'effet de votre affichées dans votre capture d'écran.

Answer 3

Vous pouvez parcourir le résultat si vous voulez que (elle génère des fragments svg inline par les regards de celui-ci), il suffit d'ouvrir votre outil de débogage web Fave (libellule opéra, Firebug ou inspecteur web WebKit) pour voir à quoi il ressemble.

Je suppose que cela pourrait être plus simple d'utiliser l'API pour faire un bar ont une couleur différente, mais si vous voulez parcourir l'arborescence et attribuer un certain style à ce qui devrait fonctionner très bien. Vous pouvez utiliser le standard DOM noyau méthodes pour parcourir l'arbre, tout comme en HTML, par exemple firstChild, nextSibling, parentNode.