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

Question

我想知道是否可以在谷歌折线图中更改DEFAULT工具提示的字体颜色.

我想通过改变这样的css样式来做到这一点:

<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代码变得无法使用.

谢谢!

Answer 1

除了询问相同用户的答案之外......

你必须设置

tooltip: { isHtml: true }

在CSS的图表选项工作.请阅读官方Google Charts文档:自定义工具提示内容

Answer 2

我知道了!

我需要在样式标记中插入这些行.

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

Answer 3

总结以上人员给出的答案。:)

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

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

/ CSS样式/

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

div.google-visualization-tooltip {}

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

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

使用!important需要时;）

Answer 4

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

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

在此文件中,您可以查看Google开发人员编写的样式,并使用您自己的样式进行覆盖.添加!重要但如果不起作用.样品:

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

只需加载您的自定义CSS与任何其他CSS.

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

您可以在chrome的网络选项卡中获取最新版本.打开开发人员工具(例如右键单击任何html对象并选择"inspect")