amCharts 4 (v4) 在饼图中设置特定颜色

Question

我正在测试这个框架 Amcharts，我开始在 amcharts v3 中配置特定的颜色，如下所示：


pieChart = AmCharts.makeChart("chartdiv", {
      "type": "pie",
      "colors": ["#388E3C", "#FBC02D", "#0288d1", "#F44336", "#8E24AA"],
      -- other stuff
    });

但我发现很难在 Amcharts V4 中做出同样的事情...我试过这样的事情


pieSeries.colors._list = am4core.color['#388E3C', '#FBC02D', '#0288D1', '#F44336', '#8E24AA']

pieSeries.slices.template.fill = am4core.color('#388E3C', '#FBC02D', '#0288D1', '#F44336', '#8E24AA')

或这个


"series": [{
    "type": "PieSeries3D",
    "colors": ["#388E3C", "#FBC02D", "#0288d1", "#F44336", "#8E24AA"],
}]

但最后还是不行...有人也来这里冒险吗？

提前致谢。

Answer 1

colors 是一个 ColorSet 对象，它是 AmCharts v4 中 color 对象数组的包装器。您必须创建一个 color 对象数组，将它们分配给 ColorSet 对象的 list 数组，然后将其分配给系列的 colors 属性:

var colorSet = new am4core.ColorSet();
colorSet.list = ["#388E3C", "#FBC02D", "#0288d1", "#F44336", "#8E24AA"].map(function(color) {
  return new am4core.color(color);
});
pieSeries.colors = colorSet;

Answer 2

我发现了一个稍微不同的方法：

  const myColors= [
    "#0000ff",
    "#ff0000",
    "#ffff00",
    "#ff00ff"
  ];
  series.columns.template.adapter.add("fill", (fill, target) => {
    return am4core.color(myColors[target.dataItem.index]);
  });

至少这适用于 am4charts.ColumnSeries() 对象。当然，列数必须等于颜色数。

Answer 3

你可以做到：

pieSeries.colors.list = [
    new am4core.color('#388E3C'),
    new am4core.color('#FBC02D'),
    new am4core.color('#0288D1'),
    new am4core.color('#F44336'),
    new am4core.color('#8E24AA'),
]

或点赞@xorspark

pieSeries.colors.list = ["#388E3C", "#FBC02D", "#0288d1", "#F44336", "#8E24AA"].map(function(color) {
      return new am4core.color(color);
});

文档在这里：https://www.amcharts.com/docs/v4/concepts/colors/#Manually_setting_color_sets

amCharts 4 (v4) 在饼图中设置特定颜色

amCharts 4 (v4) Set specific colors in pie chart

graph

amcharts

beta