ColumnChart visualisation google colonne changement de couleur

Question

Est-ce que quelqu'un sait si je peux pirater la visualisation de Google ColumnChart api le tableau en quelque sorte, de faire une seule colonne se démarquer avec une couleur différente, comme ceci:

alt text http://i46.tinypic.com/106gb39.png

Je sais que vous pouvez faites-le avec ImageChart, donc je n'en ai pas besoin (il ne déclenche aucun événement et n'a pas d'étiquette x/y). Puis-je parcourir en quelque sorte le résultat avec javascript et changer le style CSS, s'il est réellement rendu en SVG?

Answer 1

Eh bien en utilisant jQuery j'ai pu accéder à mon iframe pour le graphique. Ce n'est pas joli, mais ça marche. 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 ci-dessus les attributs [ « 5 »] fait référence à l'attribut « remplissage » de l'objet rect.

Answer 2

Vous pouvez parcourir le résultat si vous voulez (il génère des fragments svg en ligne), ouvrez simplement votre outil de débogage web (opera libellule, firebug ou webkit web inspector) pour voir à quoi il ressemble.

Je suppose qu'il pourrait être plus simple d'utiliser simplement l'API pour donner une couleur différente à une barre, mais si vous voulez traverser l'arbre et lui assigner un style qui devrait fonctionner correctement. Vous pouvez utiliser les méthodes standard DOM core pour parcourir l'arborescence, comme en HTML, par exemple firstChild, nextSibling, parentNode.

Answer 3

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

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

Maintenant, transmettez les données en deux séries distinctes: une qui est nulle partout excepté sur votre barre de couleur différente, et une qui n'est nulle que sur la barre de couleur différente. Les barres "empilées" donnent juste l'effet que vous avez affiché dans votre capture d'écran.