如何在AmCharts 4堆叠柱状图中按数值从小到大排序

需求说明 #

当前AmCharts 4堆叠柱状图按系列创建顺序生成堆叠，需修改为按数值从小到大绘制堆叠，同时保留原有系列定义逻辑。

实现思路 #

利用AmCharts的stackIndex属性控制系列堆叠顺序，在数据加载完成后，针对每个分类（示例中的年份）单独对系列数值排序，动态设置对应系列的stackIndex——数值越小的系列stackIndex越小，会被绘制在堆叠底层，以此实现按数值升序堆叠的效果。

完整代码示例 #

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "year": "2016",
  "europe": 5.5,
  "namerica": 2.5,
  "asia": 2.1,
  "lamerica": 0.3,
  "meast": 0.2,
  "africa":4.1
}, {
  "year": "2017",
  "europe": 4.6,
  "namerica": 2.7,
  "asia": 2.2,
  "lamerica": 0.3,
  "meast": 0.3,
  "africa": 2.1
}, {
  "year": "2018",
  "europe": 3.8,
  "namerica": 2.9,
  "asia": 2.4,
  "lamerica": 0.3,
  "meast": 0.3,
  "africa": 3.1
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.location = 0;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.min = 0;

// 定义系列配置，方便统一处理
const seriesConfigs = [
  { field: "europe", name: "Europe" },
  { field: "namerica", name: "North America" },
  { field: "asia", name: "Asia-Pacific" },
  { field: "lamerica", name: "Latin America" },
  { field: "meast", name: "Middle-East" },
  { field: "africa", name: "Africa" }
];

// 存储所有创建的系列
const seriesList = [];

// Create series
function createSeries(field, name) {
  // Set up series
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.name = name;
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "year";
  series.sequencedInterpolation = true;
  
  // Make it stacked
  series.stacked = true;
  
  // Configure columns
  series.columns.template.width = am4core.percent(60);
  series.columns.template.tooltipText = "[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}";
  
  // Add label
  var labelBullet = series.bullets.push(new am4charts.LabelBullet());
  labelBullet.label.text = "{valueY}";
  labelBullet.locationY = 0.5;
  labelBullet.label.hideOversized = true;
  
  return series;
}

// 创建所有系列并存储
seriesConfigs.forEach(config => {
  seriesList.push(createSeries(config.field, config.name));
});

// 数据验证完成后，动态调整每个分类的堆叠顺序
chart.events.on("datavalidated", function() {
  // 遍历每个年份数据
  chart.data.forEach(dataItem => {
    // 生成系列与对应数值的映射数组
    const seriesValuePairs = seriesList.map(series => ({
      series: series,
      value: dataItem[series.dataFields.valueY]
    }));
    
    // 按数值从小到大排序
    seriesValuePairs.sort((a, b) => a.value - b.value);
    
    // 设置每个系列的stackIndex，排序后的索引即为堆叠顺序
    seriesValuePairs.forEach((pair, index) => {
      pair.series.stackIndex = index;
    });
  });
});

// Legend
chart.legend = new am4charts.Legend();

关键说明 #

• stackIndex属性：控制堆叠系列的绘制顺序，数值越小的系列被绘制在越底层，数值大的系列叠在上方。
• datavalidated事件：确保图表数据完全加载验证后再执行排序逻辑，避免数据未就绪导致的错误。
• 排序方向调整：若需按数值从大到小堆叠，只需将排序逻辑改为seriesValuePairs.sort((a, b) => b.value - a.value)。

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