React Highcharts圆形边框不均及51+数量时渲染异常的优化禁用方法

• 基于后端数据绘制圆形，数量在1-50个时显示正常：
  
• 数量达到51个及以上时，出现边框粗糙、圆形未正常变淡的动画异常问题：
  

当前使用的Highcharts系列配置如下：

{
  data: [[el.offset.x, el.offset.y]],
  animation: false,
  color: COMPONENT_TYPE_COLOR_CODE_MAP[el.type],
  customType: el.type,
  customDescription: el.description,
  customName: el.reverseId,
  customOwnerName: el.ownerName,
  customOwnerAvatar: el.ownerAvatar,
  marker: {
    radius: COMPONENT_TYPE_SIZE_CODE_MAP[el.type],
    symbol: 'circle',
  },
  point: {
    events: {
      click: () => onSelectComponentRow(el.reverseId),
    },
  },
  points: [],
}

请问如何禁用导致该问题的优化机制？

这个问题是Highcharts默认启用的boost模块导致的：当系列点数超过50时，Highcharts会自动切换到boost渲染模式，以提升大数据量下的性能，但该模式会简化渲染逻辑，导致边框、样式动画等细节异常。

你可以通过以下两种方式禁用boost优化：

1. 全局禁用（所有系列生效） #

在图表的根配置中添加boost配置项：

const chartOptions = {
  boost: {
    enabled: false // 全局禁用boost模块
  },
  // 其他图表配置（series、xAxis、yAxis等）
}

2. 单个系列禁用（仅当前系列生效） #

直接在你的系列配置中添加boost字段：

{
  data: [[el.offset.x, el.offset.y]],
  animation: false,
  color: COMPONENT_TYPE_COLOR_CODE_MAP[el.type],
  customType: el.type,
  customDescription: el.description,
  customName: el.reverseId,
  customOwnerName: el.ownerName,
  customOwnerAvatar: el.ownerAvatar,
  marker: {
    radius: COMPONENT_TYPE_SIZE_CODE_MAP[el.type],
    symbol: 'circle',
  },
  point: {
    events: {
      click: () => onSelectComponentRow(el.reverseId),
    },
  },
  points: [],
  boost: {
    enabled: false // 当前系列禁用boost
  }
}

禁用后，Highcharts会使用常规渲染模式处理所有点数，边框和样式动画就能恢复正常。

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