谷歌图表中的工具提示样式

Question

我想知道是否可以通过更改CSS样式来改变Google折线图中默认工具提示的字体颜色。

我想通过以下方式实现这个目标：

<style>

    .google-visualization-tooltip { 

            width: 150px !important;
            border: none !important;
            border-radius: 21px !important;
            background-color: rgb(30, 50, 230)!important;
            position: absolute !important;
            box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75) !important;
            background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            background: linear-gradient(120deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            font-size:  10px !important;

          }


    </style>

所有这些CSS行都很好，但是直到现在我还没有找到字体颜色参数。

顺便说一下，如果我修改线图API的“tooltip.textStyle”参数，字体颜色会改变，但上面提到的CSS代码将无法使用。

谢谢！

- J.Arranz

Answer 1

除了同一个用户给出的答案之外...

您需要设置

tooltip: { isHtml: true }

查看图表选项以使CSS工作。 请阅读官方的Google Charts文档：自定义工具提示内容

- Spyros

Answer 2

总结上面人们给出的答案。 :)

通过在 Google 图表选项中编写以下代码，启用 HTML 处理工具提示： tooltip: { isHtml: true } (,) 如果需要，添加逗号。 :)

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

/CSS 样式/

要样式化工具提示框：

div.google-visualization-tooltip {}

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

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

需要时请使用!important ;)

- b0y

Answer 3

我明白了！

我需要在样式标签中插入这些行。

div.google-visualization-tooltip > ul > li > span {
color: #ff0000 !important;

- J.Arranz

Answer 4

当前版本的图表加载了 CSS 文件：

https://www.gstatic.com/charts/45.1/css/core/tooltip.css

在这个文件中，您可以查看 Google 开发者编写的样式，并使用自己的样式进行覆盖。如果不起作用，请添加 !important。示例：

.google-visualization-tooltip {
  border:none !important;
}

只需像加载其他 css 一样加载您的自定义 css。

如何获取当前 CSS 文件的版本？

您可以在 Chrome 的网络标签页中获取最新版本。打开开发者工具（例如，右键单击任何 html 对象并选择“检查”）

- Lukas Liesis