Highcharts proximate布局图例顺序与最新数据点不匹配问题咨询

问题原因 #

你遇到的proximate布局下图例顺序与最右数据点排布不一致的问题，是因为多个系列的末尾数据点Y值差值极小（示例中5个系列末尾数据点差值仅为1），远小于单条图例项的占位高度，默认配置下proximate布局会按series数组的定义顺序堆叠图例，不会自动适配末尾数据点的上下排布逻辑。

解决方法 #

只需在legend配置项中新增两个参数即可，无需调整图表宽度、末尾数据点排布及多行图例标签特性：

• sortSeries: true：开启proximate布局下的自动排序逻辑，强制按照系列末尾数据点的Y值高低排序图例项
• reversed: true：适配右对齐布局下Y轴数值上大下小的排布逻辑，确保图例顺序与最右数据点上下顺序完全匹配

修改后的完整配置代码如下：

Highcharts.chart('container', {
    chart: {
      styledMode: true,
    },
    legend: {
      align: 'right',
      layout: 'proximate',
      width: '30%',
      // 新增以下两个配置
      sortSeries: true,
      reversed: true
    },

    plotOptions: {
        series: {
            pointStart: 2010
        }
    },

    series: [
      {
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 39389]
    },  {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 39388]
    },   {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    },  {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 39386]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 39385]
    },
    ]

});

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