javascript - ColumnChart google 可视化列颜色变化

Question

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

我知道你可以用 ImageChart 做到这一点，所以我不需要它（它不会触发任何事件并且没有 x/y 标签）。

如果它真的在 SVG 中呈现，我可以以某种方式使用 javascript 遍历结果并更改 CSS 样式吗？

Answer 1

一个非常便宜的hack（效果很好）如下：

在图表的选项中，执行：isStacked(true);

现在以两个单独的系列传递数据：一个在除颜色色差的条形之外处处为零，一个仅在颜色色差的条形处为零。“堆叠”条只会产生您在屏幕截图中发布的效果。

Answer 2

好吧，使用 jQuery，我能够访问我的 iframe 以获取图表。它不漂亮，但它有效。它也比使用原型更短：

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

在上面的代码中，attributes['5'] 指的是 rect 对象的“fill”属性。

Answer 3

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

我猜只使用 API 使一个条具有不同的颜色可能更简单，但是如果您想遍历树并为其分配一些样式，应该可以正常工作。您可以使用标准DOM 核心方法来遍历树，就像在 HTML 中一样，例如firstChild, nextSibling, parentNode.