You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Highcharts堆叠柱状图索引顺序被覆盖问题排查

问题:堆叠柱状图序列顺序异常,零点居中时事件跳出设定顺序

我在实现堆叠柱状图时,需要明确控制序列的堆叠顺序,支持用户将任意事件设为Y轴零点,同时保证事件间的相对位置关系不变。当零点位于事件序列的两端时,通过切换reversedStacks属性就能正常实现需求,但当零点处于序列中间位置时,即便给每个序列都显式设置了index属性,还是会出现某个事件(Event 2)跳出设定顺序,跑到堆叠末尾的情况。

实际表现可见:堆叠顺序与图例顺序不匹配,Event 2被放在了Event 0之前,但我期望序列能严格遵循series数组中定义的index属性来排列顺序。

以下是相关代码:

chart: {
      height: 800,
      type: 'column',
      animation: {
        duration: 0
      },

    },
    title: {
      text: 'Data Reimbursement'
    },
    xAxis: {
      categories: [
        "Japan<br />Drug 34<br />Treatment 5",
        "United Kingdom<br />Drug 18<br />Traetment 7"
      ],

      title: {
        text: 'Country - Brand - Indcation'
      },

    },
    yAxis: {
      xmin: 0,
      reversedStacks: true,
      title: {
        text: 'Days'
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: 'black'
        }
      }
    },

    plotOptions: {
      column: {
        stacking: 'normal',
        animation: {
          duration: 0
        },
        dataLabels: {
          enabled: true,
          color: 'black',
          style: {
            textShadow: false,
            textOutline: 0
          }
        }
      }
    },
    credits: { enabled: false },
    legend: {
      show: true
    },
    series: [
      {
        "name": "Event 7",
        "data": [
          {
            "y": 0,
            "duration": 0,
            "date": null,
            "name": "Japan<br />Drug 34<br />Treatment 5",
            "event": "Event 7",
            "legendIndex": 7,
            "index": 7
          },
          {
            "y": 1,
            "duration": 1,
            "date": "2023-06-14",
            "name": "United Kingdom<br />Drug 18<br />Traetment 7",
            "event": "Event 7",
            "legendIndex": 7,
            "index": 7
          }
        ]
      },
      {
        "name": "Event 3",
        "data": [
          {
            "y": 0,
            "duration": 0,
            "date": "2021-11-16",
            "name": "Japan<br />Drug 34<br />Treatment 5",
            "event": "Event 3",
            "legendIndex": 3,
            "index": 3
          },
          {
            "y": 0,
            "duration": 0,
            "date": "2023-05-18",
            "name": "United Kingdom<br />Drug 18<br />Traetment 7",
            "event": "Event 3",
            "legendIndex": 3,
            "index": 3
          }
        ]
      },
      {
        "name": "Event 2",
        "data": [
          {
            "y": -8,
            "duration": -8,
            "date": "2021-11-08",
            "name": "Japan<br />Drug 34<br />Treatment 5",
            "event": "Event 2",
            "legendIndex": 2,
            "index": 2
          },
          {
            "y": -58,
            "duration": -58,
            "date": "2023-03-21",
            "name": "United Kingdom<br />Drug 18<br />Traetment 7",
            "event": "Event 2",
            "legendIndex": 2,
            "index": 2
          }
        ]
      },
      {
        "name": "Event 1",
        "data": [
          {
            "y": 0,
            "duration": 0,
            "date": "2021-11-08",
            "name": "Japan<br />Drug 34<br />Treatment 5",
            "event": "Event 1",
            "legendIndex": 1,
            "index": 1
          },
          {
            "y": 0,
            "duration": 0,
            "date": "2023-03-21",
            "name": "United Kingdom<br />Drug 18<br />Traetment 7",
            "event": "Event 1",
            "legendIndex": 1,
            "index": 1
          }
        ]
      },
      {
        "name": "Event 0",
        "data": [
          {
            "y": -372,
            "duration": -372,
            "date": "2020-11-01",
            "name": "Japan<br />Drug 34<br />Treatment 5",
            "event": "Event 0",
            "legendIndex": 0,
            "index": 0
          },
          {
            "y": -35,
            "duration": -35,
            "date": "2023-02-14",
            "name": "United Kingdom<br />Drug 18<br />Traetment 7",
            "event": "Event 0",
            "legendIndex": 0,
            "index": 0
          }
        ]
      }
    ]

我遗漏了什么配置?为什么index为2的Event 2不遵循设定的顺序?

内容的提问来源于stack exchange,提问作者Randall Gremillion

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.05 21:19:56