ColumnChart изменение цвета столбца Google визуализации

Question

Кто-нибудь знает, могу ли я каким-то образом взломать визуализацию Google График API ColumnChart , чтобы выделить один столбец с другим цветом, например:

Я знаю, что вы можете сделать это с помощью ImageChart, поэтому мне это не нужно (он не запускает события и не имеет меток x / y).

Могу ли я как-нибудь просмотреть результат с помощью javascript и изменить стиль CSS, если он действительно отображается в SVG?

Answer 1

Очень дешевый хак (который работает довольно хорошо) выглядит следующим образом:

В опциях для вашей диаграммы выполните: isStacked (true);

Теперь передайте данные в две отдельные серии: одну, которая равна нулю везде, кроме неокрашенной полосы, и одну, которая равна нулю только, если она не окрашена. «Сложенные» бары дают только тот эффект, который вы разместили на скриншоте.

Answer 2

Хорошо, используя jQuery, я смог добраться до своего iframe для графика. Это не красиво, но это работает. Это также короче, чем при использовании прототипа:

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

В приведенном выше коде атрибуты ['5'] ссылаются на атрибут fill для объекта прямоугольника.

Answer 3

Вы можете просмотреть результат, если хотите быть уверенным (он генерирует встроенные фрагменты svg по внешнему виду), просто откройте свой любимый инструмент веб-отладки (опера-стрекоза, firebug или веб-инспектор веб-пакетов), чтобы увидеть, как он выглядит.

Полагаю, может быть проще использовать API, чтобы один столбец имел другой цвет, но если вы хотите пройтись по дереву и назначить ему какой-нибудь стиль, который должен работать просто отлично. Вы можете использовать стандартные DOM core методы для обхода дерева, как в HTML, например, firstChild, nextSibling, parentNode.