时间戳

首页 > 解决方案 > AmCharts (V4) 中的样式工具提示

amcharts - AmCharts (V4) 中的样式工具提示

问题描述

目前我正在尝试设置一个工具提示的样式，当您将鼠标悬停在具有动态内容（公司名称）的地图图像上时会出现该工具提示。

我的目标是将背景设置为特定颜色，为字体指定颜色并应用 CSS 属性“box-shadow”。

对于第一个目标，我尝试像这样使用“填充”属性：

mapImageSeries 的类型为 am4maps.MapImageSeries。

this.mapImageSeries.tooltip.fill = am4core.color('#ffff00');

但是使用哪个不起作用

this.mapImageSeries.tooltip.background.cornerRadius = 0;  // will change the "border-radius" of the tooltip. 

this.mapImageSeries.tooltip.background.fill = am4core.color('#ffff00'); // does also not work.

对于我为字体设置颜色属性的第二个目标，我没有找到与 box-shadow css 属性相同的属性。

是否可以为工具提示附加一个 CSS 类，以便我可以通过 CSS 轻松设置它的样式？以及如何根据我面临的要求设置工具提示的样式？

标签： amcharts

解决方案

默认情况下，工具提示会从相关对象中提取颜色，因此要操作它们的样式，您首先必须将其关闭，例如：

this.mapImageSeries.tooltip.getFillFromObject = false;

然后你可以这样做：

this.mapImageSeries.tooltip.background.cornerRadius = 0;
this.mapImageSeries.tooltip.background.fill = am4core.color("#ffff00");

box-shadow您可以应用SVG 过滤器，DropShadow而不是修改 CSS 。Tooltips 有一个过滤器，实际上是一个DropShadow过滤器，我们可以对其进行修改：

var dropShadow = this.mapImageSeries.tooltip.filters.getIndex(0);
dropShadow.dx = 3;
dropShadow.dy = 3;
dropShadow.blur = 5;
dropShadow.opacity = 0.7;

要修改文本样式，他们实际上通过他们的属性Tooltip拥有自己的Label孩子。label有两种方法可以修改颜色，第一种方法和上面的方法一样，例如，如果你想为工具提示文本设置默认颜色：

this.mapImageSeries.tooltip.label.fill = am4core.color("#e97f02"); // color from lolcolors: https://www.webdesignrankings.com/resources/lolcolors/#palette_18

另一种为文本着色以及应用其他 CSS 样式的方法是在字符串中使用视觉格式，例如：tooltipText

this.mapImageSeries.tooltipText = "[font-size: 20px; #bd1550]{companyTitle}:[/]\n{locationTitle} branch";

一种无法通过视觉格式工作的样式是text-align，您需要通过 SVG 属性来实现，例如

this.mapImageSeries.tooltip.label.textAlign = "middle";

我在这里为你做了一个演示：

https://codepen.io/team/amcharts/pen/f6d4167ea7ccd5dd47054d2430443c0a/

希望这会有所帮助，让我知道这一切是否有意义。

如果您仍然希望根据自己的需要使用字面上的 CSS，请告诉我，我会尝试与您一起解决。

推荐阅读