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行都运行良好，但直到现在我还没有找到字体颜色参数。

顺便说一句，如果修改Line Chart API的“tooltip.textStyle”参数，字体颜色会发生变化，但上面提到的CSS代码将无法使用。

谢谢！

Answer 1

除了来自同一用户的答案之外......

您必须设置

tooltip: { isHtml: true }

在CSS工作的图表选项中。请阅读官方Google Charts文档：customizing tooltip content

Answer 2

我明白了！

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

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

Answer 3

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

通过在google chart CODE的选项中编写此代码，启用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对象并选择＆＃34;检查＆＃34;）

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

4 个答案: