amChart 5图形界面的图表标签如何设置不同的颜色？答案

【问题标题】：How to assign different colors to chart labels on graph interface in amChart 5?amChart 5图形界面的图表标签如何设置不同的颜色？
【发布时间】：2023-01-15 03:17:16
【问题描述】：

我有一个简单的 amChart5 图表。我想更改轴上显示的文本的颜色，并为每个元素分配不同的颜色。

我拥有的：

我想要的是：

documentation 解释说您可以更改颜色，但它适用于整个轴，同时适用于所有元素。

您知道是否有办法单独处理每个元素？

【问题讨论】：

标签： amcharts amcharts5

【解决方案1】：

一个不错的解决方案是像这样使用 adapter：

xAxis.get("renderer").labels.template.adapters.add("fill", (fill, target) => { 
  if (target.dataItem && target.dataItem.dataContext) {
    let category = target.dataItem.dataContext.category;
      
    if (category === "Category 1") {
      return "#ff0000";
    } else if (category === "Category 2") {
      return "#00ff00";
    } else {
      return "#0000ff";
    }
  }
    
  return fill;
});

完整代码：

am5.ready(() => {

  let root = am5.Root.new("chartdiv");

  let chart = root.container.children.push(am5xy.XYChart.new(root, {}));

  let legend = chart.children.push(am5.Legend.new(root, {
    centerX: am5.p50,
    x: am5.p50
  }));

  let data = [
    {
      "category": "Category 1",
      "value1": 10,
      "value2": 1
    },
    {
      "category": "Category 2",
      "value1": 20,
      "value2": 7
    },
    {
      "category": "Category 3",
      "value1": 15,
      "value2": 3
    }
  ];

  let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
    categoryField: "category",
    renderer: am5xy.AxisRendererX.new(root, {})
  }));

  xAxis.data.setAll(data);
  
  // ==================================================
  xAxis.get("renderer").labels.template.adapters.add("fill", (fill, target) => {   
    if (target.dataItem && target.dataItem.dataContext) {
      let category = target.dataItem.dataContext.category;
      
      if (category === "Category 1") {
        return "#ff0000";
      } else if (category === "Category 2") {
        return "#00ff00";
      } else {
        return "#0000ff";
      }
    }
    
    return fill;
  });
  // ==================================================

  let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  }));

  function makeSeries(name, fieldName) {
    let series = chart.series.push(am5xy.ColumnSeries.new(root, {
      name: name,
      xAxis: xAxis,
      yAxis: yAxis,
      categoryXField: "category",
      valueYField: fieldName
    }));

    series.data.setAll(data);
    legend.data.push(series);
  }

  makeSeries("Series 1", "value1");
  makeSeries("Series 2", "value2");

});

#chartdiv {
  width: 100%;
  height: 350px;
}

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>

<div id="chartdiv"></div>

【讨论】：