gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 23:36:38 28 4
gpt4 key购买 nike

目前我正在尝试设置当您将鼠标悬停在具有动态内容(公司名称)的 map 图像上时出现的工具提示的样式。

我的目标是将背景设置为特定颜色,为字体指定颜色并应用 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 设置它的样式?以及如何使用我面临的要求?

最佳答案

默认情况下,工具提示会从相关对象中提取颜色,因此要操作它们的样式,您首先必须 turn that off ,例如:

this.mapImageSeries.tooltip.getFillFromObject = false;

你可以这样做:

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

不用修改CSS box-shadow,你可以应用the DropShadow SVG filter . 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 子项。有两种方法可以修改颜色,第一种是像上面的方法,e.g.如果要为工具提示文本设置默认颜色:

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

另一种为文本着色以及应用其他 CSS 样式的方法是使用 Visual formatting在您的 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,请告诉我,我会尝试与您一起解决。

关于amcharts - AmCharts (V4) 中的样式工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52887782/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com