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);

这就是它 returns:

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 在我记录时 return 正确的字符串："#A4A2A3"

请帮忙

Answer 1

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

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

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

Amcharts 自定义可变颜色

Amcharts custom variable color

charts

amcharts

laravel

vue.js

amcharts4