Google图表API样式工具提示

Question

有没有办法在Google图表API中设置工具提示的样式？我设法只使用tooltip.textStyle更改了文字的颜色。那么是否有任何解决方案可以将白色背景更改为某些其他颜色（如图所示）：

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

Answer 1

我通过意外发现找到了解决方案：

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

无论如何，我没有在google charts API中找到任何背景配置选项。

Answer 2

通过在google图表选项中编写此代码，启用HTML处理工具提示 代码：tooltip: { isHtml: true }（，）根据需要添加逗号。 :)

现在您可以使用HTML和CSS设置工具提示的样式。 :)

/ CSS样式 /

设置工具提示框的样式：

div.google-visualization-tooltip {}

设置字体大小，颜色等内容的样式

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

在需要时使用!important;）

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

Answer 3

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

Answer 4

由于Google Chart Tools API通过托管在其服务器上的iframe实现其SVG图表，因此根据Same Origin Policy您可能无法访问或修改其他域的内容，除非在发送之前通过服务器端操作客户回应。

鉴于此，我不确定你是如何设法改变文本颜色的 - 可能是一个浏览器错误？

Answer 5

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

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

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