分别更改 amchart 中每个数据的边框颜色答案

【问题标题】：Change border color for each data in amchart separately分别更改 amchart 中每个数据的边框颜色
【发布时间】：2019-06-13 11:53:18
【问题描述】：

我看到有一个选项可以更改饼图中每个数据条目的背景颜色，但找不到更改边框颜色的选项。

    memoryChartSeries.colors.list = [
      am4core.color('rgba(54, 162, 235, 0.2)'), // blue

我找到的是memoryChartSeries.slices.template.stroke，但我不知道这是否可以容纳一种以上的颜色。我希望是这样的：

    memoryChartSeries.border.colors.list = [
      am4core.color('rgba(54, 162, 235, 0.2)'), // blue

【问题讨论】：

标签： amcharts amcharts4

【解决方案1】：

你可以设置pieSeries.slices.template.stroke:

pieSeries.slices.template.stroke = am4core.color('rgba(54, 162, 235, 0.2)');

这将为pie chart 的所有切片设置边框颜色。

如果您想为每个切片单独设置边框颜色，您可能需要为此使用adapter：

pieSeries.slices.template.adapter.add("stroke", (value, target, key) => {
    // return what color you want here...
    return value;
});

【讨论】：

嗯，以与颜色相同的方式使用它会更方便...我将尝试使用适配器，因为我想为每个切片提供自己的背景和边框颜色
@muuvmuuv 你想用哪些规则来设置每个切片的颜色？
在适配器中可以使用target.dataItem.dataContext为每个切片设置数据对象。

【解决方案2】：

您需要定义您的自定义颜色代码数组并设置主题。

const colors = [
    am4core.color('#18020A'),
    am4core.color('#730154'),
    am4core.color('#E77624'),
    am4core.color('#7E5109'),
    am4core.color('#34495E'),
    am4core.color('#B3B6B7'),
    am4core.color('#232555'),
    am4core.color('#196F3D'),
    am4core.color('#6C3483'),           
]

const am4themes_myTheme = (target) => {
    if (target instanceof am4core.ColorSet) {       
        target.list =  themeModeChange(themeMode)
    }
}

am4core.useTheme(am4themes_myTheme);

series.columns.template.adapter.add("stroke", function (fill, target) {
    return chart.colors.getIndex(target.dataItem.index);
});

您可以单独更改amchart中每个数据的边框颜色。

【讨论】：