ColumnChart谷歌可视化列颜色更改

Question

是否有人知道我是否可以以某种方式破解谷歌的可视化ColumnChart api图表，使单个列以不同的颜色脱颖而出，如下所示：

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

我知道你可以用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']指的是rect对象的“fill”属性。

Answer 3

如果你想确定它可以遍历结果（它通过它的外观生成内联svg片段），只需打开你最喜欢的web调试工具（opera dragonfly，firebug或webkit web inspector）来查看它的样子。

我猜测使用API​​使一个条形图具有不同的颜色可能更简单，但是如果你想遍历树并为它指定一些应该可以正常工作的样式。您可以使用标准DOM core方法遍历树，就像在HTML中一样，例如firstChild, nextSibling, parentNode。