7

有没有办法在 Google 图表 API 中设置工具提示的样式?我设法只使用tooltip.textStyle. 那么是否有任何解决方案可以将白色背景更改为其他颜色(如图所示):

在此处输入图像描述

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

4

5 回答 5

6

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

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

无论如何,我在谷歌图表 API 中没有找到任何背景配置选项。

于 2013-05-02T10:03:56.870 回答
5

通过在您的谷歌图表代码选项中编写此代码来启用由 HTML 处理的工具提示:tooltip: { isHtml: true }(,) 如果需要,请添加逗号。:)

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

/ CSS 样式/

要设置工具提示框的样式:

div.google-visualization-tooltip {}

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

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

!important需要时使用;)

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

于 2016-05-17T06:39:17.310 回答
1

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

于 2014-03-28T10:26:52.827 回答
0

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

鉴于此,我不确定您是如何设法更改文本颜色的——也许是浏览器错误?

于 2012-07-25T20:47:02.700 回答
0

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

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

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

于 2014-11-14T08:58:59.577 回答