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
相关产品推荐
相关产品推荐

