移动端使用Highcharts 7.2.2点击图例切换时图表UI显示异常求助

问题修复方案 #

1. 修复容器适配问题 #

当前容器写死了固定宽度width:650px，移动端自适应场景下会导致渲染视口异常，改为响应式宽度即可：

#container {
  width: 100%;
  max-width: 650px;
  height: 650px;
}

2. 修正图例点击事件逻辑 #

你自定义了legendItemClick事件但没有同步处理显隐逻辑，导致触发事件后系列状态和UI渲染不同步，要么直接删除自定义的点击事件，要么手动处理显隐逻辑：

plotOptions: {
  series: {
    events: {
      legendItemClick: function(event) {
        console.log('legendItemClick');
        // 手动切换显示状态
        this.setVisible(!this.visible);
        return false;
      },
      // 移除mouseOver和mouseOut的return false逻辑，避免干扰Highcharts默认渲染流程
      mouseOver: function () {},
      mouseOut: function () {}
    }
  }
}

3. 统一系列数据格式 #

柱状图的data用的是[索引, 值]格式，折线图用的是[月份字符串, 值]，数据格式不统一会导致重绘时坐标计算错误，把折线图的data也改成索引格式：

// Neighborhood折线系列的data调整为
"data": [
  [0, 136],
  [1, 126],
  [2, 120],
  [3, 137],
  [4, 130],
  [5, 146],
  [6, 82],
  [7, 77],
  [8, 79],
  [9, 146],
  [10, 145],
  [11, 125]
]

4. 修复7.2.2版本移动端重绘bug #

该版本存在系列切换后SVG渲染异常的已知问题，可在图例点击后手动调用重绘方法强制刷新：

legendItemClick: function(event) {
  const chart = this.chart;
  setTimeout(() => {
    chart.reflow();
    chart.redraw(false); // false表示关闭重绘动画，避免移动端卡顿
  }, 0);
}

5. 可选优化（降低移动端渲染异常概率） #

关闭不必要的动画效果：

chart: {
  animation: false
},
plotOptions: {
  series: {
    animation: false
  }
}

内容的提问来源于stack exchange，提问作者mahesh p.v