Цвет настраиваемой переменной Amcharts - PullRequest
0 голосов
/ 27 мая 2020

Я хочу динамический c цвет на моей диаграмме. Я использую импортированный файл 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"

Пожалуйста, помогите

1 Ответ

0 голосов
/ 30 мая 2020

По результатам моего тестирования, getPropertyValue возвращает все, что находится после имени свойства, включая любые пробелы, из-за которых AmCharts неправильно анализирует цвет; ваш журнал, скорее всего, возвращает " #A4A2A3". Вам нужно заранее вызвать trim в строке:

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

Обратите внимание, что вам нужно установить fill в шаблоне mapPolygon серии, чтобы он применялся к регионам карты.

...