如何修复堆叠柱状图(stacked bar)堆叠索引，固定A、B、C层级顺序

要让堆叠层A处于最上层（第一个视觉位置）、B次之、C处于最底层（最后位置），可以通过以下两种方式实现：

方法一：调整series数组的顺序 #

堆叠条形图的层级默认遵循series的定义顺序**（先定义的在底层，后定义的在上层）**，直接调整数组顺序，把需要在底层的C放在最前，B居中，A放在最后即可：

{
  chart: {
    type: "bar",
    stacked: true,
  },
  series: [
    {
      name: "c",
      data: [5, 0],
      color: "#B7B7B7", // gray
    },
    {
      name: "b",
      data: [25, 0],
      color: "#861086", // purple
    },
    {
      name: "a",
      data: [70, 0],
      color: "#32a852", // green
    },
  ],
};

方法二：使用index属性控制绘制顺序 #

如果不想调整series数组的原始顺序，可以通过index属性指定系列的绘制优先级**（index值越大，绘制越晚，层级越靠上）**。将A的index设为最大值，B次之，C设为最小值：

{
  chart: {
    type: "bar",
    stacked: true,
  },
  series: [
    {
      name: "a",
      data: [70, 0],
      color: "#32a852", // green
      index: 2, // 最大，最上层
    },
    {
      name: "b",
      data: [25, 0],
      color: "#861086", // purple
      index: 1, // 中间层
    },
    {
      name: "c",
      data: [5, 0],
      color: "#B7B7B7", // gray
      index: 0, // 最小，最底层
    },
  ],
};

注意：多数图表库（如Highcharts）的index属性从0开始计数，绘制顺序从小到大，index值越大的系列会覆盖在上方，正好匹配你需要的堆叠层级顺序。

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