ColumnChart google 可视化列颜色变化答案

【问题标题】：ColumnChart google visualization column color changeColumnChart google 可视化列颜色变化
【发布时间】：2010-03-09 14:32:33
【问题描述】：

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

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

如果真的用 SVG 渲染，我可以用 javascript 以某种方式遍历结果并更改 CSS 样式吗？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：