Highcharts图例自定义：元素顺序调整、Checkbox hover样式等问题求助

现状说明 #

• 已用Highcharts.wrap()实现图例自定义，把原结构[Symbol] [Label]改成了带复选框的布局，当前效果是[Checkbox] [Symbol] [Label]，点击复选框能控制系列线条的显示/隐藏
• 核心需求是把结构调整为[Checkbox] [Label] [Symbol]
• 已搞定的问题：通过legendItemClick事件实现了点击图例项同步复选框选中状态

待解决问题及修复方案 #

问题1：rtl属性导致图例整体顺序反转 #

设置legend.rtl=true想调整Symbol和Label的顺序，结果整个图例项的排列顺序都反转了（跟开了legend.reversed: true一样），和文档说的只调整Symbol、Label顺序不符。

修复方法：
别用rtl属性，直接改DOM结构来调整顺序。在包裹renderItem方法的函数里，手动重新排列元素：

Highcharts.wrap(Highcharts.Legend.prototype, 'renderItem', function(proceed, item) {
  // 先执行原方法渲染元素
  proceed.call(this, item);
  const legendItemEl = item.legendItem.element;
  // 获取三个核心元素
  const checkbox = legendItemEl.querySelector('.highcharts-checkbox');
  const symbol = legendItemEl.querySelector('.highcharts-point');
  const label = legendItemEl.querySelector('.highcharts-legend-item-text');
  
  // 重新排列成 复选框 -> 标签 -> 符号 的顺序
  if (checkbox && symbol && label) {
    legendItemEl.appendChild(label);
    legendItemEl.appendChild(symbol);
  }
});

问题2：无法通过legend.itemCheckboxStyle添加hover样式 #

用legend.itemCheckboxStyle设置hover时的box-shadow无效，需求是鼠标悬停复选框时显示阴影。

修复方法：
直接用CSS或者事件监听来实现：

1. CSS方案（最简单）：

.highcharts-legend-item:hover .highcharts-checkbox {
  box-shadow: 0 0 3px 2px rgba(0, 123, 255, 0.5);
}

2. JS事件监听方案（适合动态调整样式）：

Highcharts.wrap(Highcharts.Legend.prototype, 'renderItem', function(proceed, item) {
  proceed.call(this, item);
  const legendItemEl = item.legendItem.element;
  const checkbox = legendItemEl.querySelector('.highcharts-checkbox');
  
  legendItemEl.addEventListener('mouseover', () => {
    checkbox.style.boxShadow = '0 0 3px 2px rgba(0, 123, 255, 0.5)';
  });
  legendItemEl.addEventListener('mouseout', () => {
    checkbox.style.boxShadow = '';
  });
});

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