谷歌图表API样式化工具提示

Question

有没有一种方法可以在Google图表API中样式化工具提示？我已经成功地使用tooltip.textStyle更改了文本颜色。那么，是否有任何解决方案可以将白色背景更改为其他颜色（如图片所示）？

测试游乐场 http://jsfiddle.net/nyNAg/

- vlgalik

Answer 1

我通过偶然发现了一个解决方案：

我偶然发现了一个解决方案：

<style>
path {
  fill: yellow;
}
</style>

无论如何，在Google Charts API中我都没有找到任何关于背景的配置选项。

- ricsca

---

我已经编辑了选择器，只匹配工具提示气泡 http://jsfiddle.net/nyNAg/21/ - vlgalik

在 var options = { } 处更改工具提示的背景是否可能？例如，要使图表透明，可以设置 var options = {backgroundColor: { fill:'transparent'} };。 - Pathros

我使用了.google-visualization-tooltip path { fill: yellow; }。 - PLA

Answer 2

通过在Google Charts的选项中编写以下代码，启用HTML处理工具提示：

tooltip: { isHtml: true } (如果需要，添加逗号。 :))

现在，您可以使用HTML和CSS样式化工具提示。 :)

/CSS样式/

样式化工具提示框：

div.google-visualization-tooltip {}

要对内容进行样式设置，如字体大小、颜色等

div.google-visualization-tooltip > ul > li > span {}

在必要时使用!important ;)

http://jsfiddle.net/nyNAg/66/

- b0y

---

一个人应该把/附加自定义字符串放在哪里？ - 3kstc

Answer 3

可以使用自定义HTML完全替换标签。这可能有点复杂，但可以完全控制内容和样式。请参见https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content。

- pkopac

Answer 4

另一种选择可能是覆盖行内样式规则，例如：

li.google-visualization-tooltip-item span[style] { font-weight: normal !important; }

http://css-tricks.com/override-inline-styles-with-css/

- Jungle Editor

Answer 5

由于Google Chart Tools API通过在其服务器上托管的iframe实现其SVG图表，根据同源策略，您可能无法访问或修改另一个域的内容，除非通过在向客户端发送响应之前进行服务器端操作。

鉴于此，我不确定您是如何成功更改文本颜色的-也许是浏览器漏洞？

- blippy

---

有一个文本颜色的配置选项 "tooltip.textStyle"，但没有背景颜色。我只使用 Firebug 编辑了 SVG，以展示我想要实现的效果（并截取了屏幕截图）。 - vlgalik

我看到了你的链接。除了通过API专门提供的那些样式之外，我看不出还有什么其他的解决办法。 - blippy