有没有办法在 Google 图表 API 中设置工具提示的样式?我设法只使用tooltip.textStyle
. 那么是否有任何解决方案可以将白色背景更改为其他颜色(如图所示):
5 回答
我通过偶然发现了一个解决方案:
<style>
path {
fill: yellow;
}
</style>
无论如何,我在谷歌图表 API 中没有找到任何背景配置选项。
通过在您的谷歌图表代码选项中编写此代码来启用由 HTML 处理的工具提示:tooltip: { isHtml: true }
(,) 如果需要,请添加逗号。:)
现在您可以使用 HTML 和 css 设置工具提示样式。:)
/ CSS 样式/
要设置工具提示框的样式:
div.google-visualization-tooltip {}
设置字体大小、颜色等内容的样式
div.google-visualization-tooltip > ul > li > span {}
!important
需要时使用;)
可以用自定义 HTML 完全替换标签。它可能有点复杂,但可以让您完全控制内容和风格。请参阅https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content
由于 Google Chart Tools API 通过托管在其服务器上的 iframe 实现其 SVG 图表,因此根据同源策略,您不得访问或修改另一个域的内容,除非在向客户端发送响应之前通过服务器端操作。
鉴于此,我不确定您是如何设法更改文本颜色的——也许是浏览器错误?
另一种选择可能是覆盖内联样式规则,例如
li.google-visualization-tooltip-item span[style] { font-weight: normal !important; }