时间戳

首页 > 解决方案 > Amcharts 自定义可变颜色

laravel - Amcharts 自定义可变颜色

问题描述

我想要图表上的动态颜色。我使用带有一些标识颜色的导入 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"

请帮忙

标签： laravelvue.jschartsamchartsamcharts4

解决方案

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

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

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

推荐阅读