在 series.columns.template 上使用 propertyFields 时设置替代颜色

Question

我在使用 propertyField 为系列列模板上的标签设置替代颜色时遇到问题。

例如。我用这个：

let columnTemplate = series.columns.template;
columnTemplate.propertyFields.fill = 'color';

其中 'color' 来自 DataItem，作为来自后端系统的数据。

稍后我想在列上添加标签。我想要对比，所以我想使用替代颜色：https://www.amcharts.com/docs/v4/concepts/colors/#Getting_contrasting_color

我把我的标签编成：

let label = columnTemplate.createChild(am4core.Label);

然后我将设置series.columns.template中的替代颜色。但我没有得到它的工作。我试过例如：

label.fill = series.columns.template.fill.alternative;

完成工作。

这个：

label.fill = am4core.color(series.columns.template.propertyFields.fill).alternative;

不工作。

这个：

label.adapter.add('fill', (value, target, key) => {
  const dataContext: { [key: string]: string } | undefined = target.dataItem?.dataContext as {
    [key: string]: string;
  };
  return am4core.color(dataContext?.color).alternative;
});

抛出错误...

有谁知道解决这个问题的方法吗？请帮忙。

Answer 1

我不确定这是一个好的解决方案，但它有效：

export function setContrastColor(value: any, target: any) {
  const dataContext = (target.dataItem?.dataContext ?? {}) as Record<string, string | undefined>;
  if (dataContext.color) {
      return am4core.color(`${dataContext?.color}`).alternative;
  } else {
    return am4core.color('#FFF');
  }
}

并调用它：

label.adapter.add('fill', setContrastColor);

在 series.columns.template 上使用 propertyFields 时设置替代颜色

Set alternative colors when using the propertyFields on series.columns.template

amcharts

amcharts4