如何在amCharts 5中根据数值动态设置柱状图颜色

需求说明 #

• 数据格式：对象数组，示例：[{name:"jan", value:3}]
• 颜色规则：
  • 当 0 ≤ value < 2.5 时，柱子设为绿色
  • 当 2.5 ≤ value < 5 时，柱子设为橙色
  • 当 value ≥ 5 时，柱子设为红色

完整修改代码 #

am5.ready(function() {
    // 创建根元素
    var root = am5.Root.new("chartdiv");
    
    // 设置主题
    root.setThemes([
      am5themes_Animated.new(root)
    ]);
    
    // 创建图表
    var chart = root.container.children.push(am5xy.XYChart.new(root, {
      panX: true,
      panY: true,
      wheelX: "panX",
      wheelY: "zoomX",
      pinchZoomX:true
    }));
    
    // 添加游标
    var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
    cursor.lineY.set("visible", false);
    
    // 创建X轴
    var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
    xRenderer.labels.template.setAll({
      rotation: -90,
      centerY: am5.p50,
      centerX: am5.p100,
      paddingRight: 15
    });
    
    var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
      maxDeviation: 0.3,
      categoryField: "name",
      renderer: xRenderer,
      tooltip: am5.Tooltip.new(root, {})
    }));
    
    // 创建Y轴
    var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
      maxDeviation: 0.3,
      renderer: am5xy.AxisRendererY.new(root, {})
    }));
    
    // 创建柱状系列
    var series = chart.series.push(am5xy.ColumnSeries.new(root, {
      name: "Series 1",
      xAxis: xAxis,
      yAxis: yAxis,
      valueYField: "value",
      sequencedInterpolation: true,
      categoryXField: "name",
      tooltip: am5.Tooltip.new(root, {
        labelText:"{valueY}"
      })
    }));
    
    series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5});

    // 核心：动态设置柱子颜色
    series.columns.template.adapters.add("fill", function(fill, target) {
      var dataItem = target.dataItem;
      if (dataItem) {
        var value = dataItem.get("valueY");
        if (value >= 0 && value < 2.5) {
          return am5.color("#2ecc71"); // 绿色
        } else if (value >= 2.5 && value < 5) {
          return am5.color("#f39c12"); // 橙色
        } else if (value >= 5) {
          return am5.color("#e74c3c"); // 红色
        }
      }
      return fill;
    });
    
    // 加载数据
    var myChart = document.getElementById('chartdiv');
    var data = JSON.parse( myChart.dataset.chartdata )
    
    xAxis.data.setAll(data);
    series.data.setAll(data);
    
    // 加载动画
    series.appear(1000);
    chart.appear(1000, 100);

}); // end am5.ready()

关键修改说明 #

• 通过series.columns.template.adapters.add("fill", ...)方法，动态拦截并修改每个柱子的填充色，这是amCharts 5推荐的动态属性修改方式
• 利用target.dataItem.get("valueY")获取当前柱子对应的数值，再根据区间返回对应颜色
• 颜色需用am5.color(十六进制颜色值)创建amCharts兼容的颜色对象

备选方案（绑定数据字段） #

如果希望直接在数据中关联颜色，可以遍历数据时给每个对象添加color字段，再在系列配置中指定绑定：

// 遍历数据添加color字段
data.forEach((col) => {
    if(col.value >= 0 && col.value < 2.5){
        col.color = am5.color("#2ecc71");
    } else if(col.value >= 2.5 && col.value < 5){
        col.color = am5.color("#f39c12");
    } else if(col.value >= 5){
        col.color = am5.color("#e74c3c");
    }
})

// 创建系列时添加字段绑定
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  // ... 原有配置
  fillField: "color",
  strokeField: "color" // 可选：同步边框颜色
}));

内容的提问来源于stack exchange，提问作者Keenan Lombard