Highcharts极坐标图调用setData动态设置系列数据显示异常如何解决

该显示错乱问题和Highcharts极坐标（polar）能力本身无关，是平行坐标（parallelCoordinates）模式的初始化逻辑限制导致：

• Highcharts开启平行坐标模式时，会在图表首次渲染阶段读取当前所有系列的初始数据长度，自动建立「数据点索引 -> 同序号yAxis」的映射关系，后续渲染会按这个映射把每个维度的数值匹配到对应量程的y轴计算坐标。
• 无初始数据直接初始化图表时，上述轴映射关系不会被正确构建，后续调用setData()加载数据时，Highcharts不会自动重新触发平行坐标的映射构建逻辑，所有数据点默认会被匹配到第一个yAxis计算坐标，叠加上极坐标的环形渲染规则，就会出现线条错乱的问题。
• 内联写入数据初始化的图表，因为首次渲染时就携带完整数据，映射关系构建正常，因此显示无异常。

以下三种方案任选其一即可：

• 方案1（推荐，改动最小）：初始化时传入等长占位数据
  初始化配置阶段给每个series提前传入和最终数据长度一致的空占位数组，让平行坐标的映射逻辑在首次渲染时正确生成，后续再调用setData()更新数据就不会错乱，示例代码：

  const config2 = JSON.parse(JSON.stringify(config));
  config2.title.text = "动态加载数据正常显示"
  // 占位数据长度和实际数据点数、categories数量、yAxis数量保持一致即可
  config2.series[0].data = Array(5).fill(null);
  config2.series[1].data = Array(5).fill(null);
  const chart2 = Highcharts.chart(containerId2, config2);
  
  // 后续动态加载数据直接调用setData即可
  chart2.series[0].setData(data1);
  chart2.series[1].setData(data2);
  

• 方案2：通过全量配置更新触发重计算
  如果不想提前添加占位数据，可以在拿到数据后调用chart.update()方法更新全量系列配置，该方法会触发平行坐标的完整配置重计算，自动构建正确的轴映射，示例：

  const chart2 = Highcharts.chart(containerId2, config2);
  // 拿到数据后更新全量系列配置
  chart2.update({
    series: [
      { name: "one", type: "line", data: data1 },
      { name: "two", type: "line", data: data2 }
    ]
  });
  

• 方案3：手动指定数据点绑定的y轴
  也可以在传入setData()前处理数据格式，给每个数据点明确指定对应的yAxis索引，跳过自动映射逻辑，示例数据格式：

  // 5个数据点分别绑定索引0-4的yAxis
  const processedData = data1.map((val, idx) => ({
    y: val,
    yAxis: idx
  }))
  chart2.series[0].setData(processedData);
  

补充说明：该问题仅在开启parallelCoordinates配置的场景下出现，普通极坐标图表即使初始化无数据，后续调用setData也可正常渲染，与极坐标本身的能力无关。

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