Amcharts自定义变量颜色

Question

我想在图表上显示动态颜色。我使用带有某些标识颜色的导入的CSS文件。像这样：

:root
{
    --brand-color: {{$color}};
}

我使用AmChart World图表进行可视化，但是a4mchart.color（）不喜欢变量。我如何确保它确实包含变量？这是我的代码：

let style = getComputedStyle(document.body);
let brandColor = style.getPropertyValue('--brand-color');
const chartWorld = am4core.create(this.$refs.chartdiv, am4maps.MapChart);

polygonSeries.fill = am4core.color(brandColor);

这就是返回的内容：

Color {_value: {
alpha: 1
alternative: Color
darkColor: Color
hex: "#000000"
lightColor: Color
rgb: Object
rgba: "rgb(0,0,0)"
_value: {r: 0, g: 0, b: 0, a: 1}
__proto__: Object…}}

它没有做任何改变，但是当我登录时，BrandColor确实返回了正确的字符串："#A4A2A3"

请帮助

Answer 1

根据我的测试，getPropertyValue返回属性名称之后的所有内容，包括任何空格，这会导致AmCharts无法正确解析颜色；您的日志可能返回" #A4A2A3"。您需要事先在字符串上调用trim：

polygonSeries.mapPolygons.template.fill = am4core.color(brandColor.trim());

请注意，您需要在系列的mapPolygon模板上设置fill才能将其应用于地图区域。