使用highcharts-react wrapper绘制韦恩图时遇未捕获TypeError求助

问题描述 #

我在.json文件中保存了100组韦恩图数据，使用React、Highcharts及官方highcharts-react wrapper，通过滑块切换不同韦恩图。代码如下：

import data from "./data/venns.json";

import { useState } from "react";

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import vennModule from "highcharts/modules/venn";
vennModule(Highcharts);

function App() {

  const [userPercent, setUserPercent] = useState(1);

  const vennData = data[userPercent]; // ref the imported .json file

  const formattedVennData = [
    {
      sets: ["baseline"],
      value: vennData[5].size,
    },
    {
      sets: ["ours"],
      value: vennData[4].size,
    },
    {
      sets: ["optimal"],
      value: vennData[6].size,
    },
    {
      sets: ["baseline", "optimal"],
      value: vennData[3].size,
    },
    {
      sets: ["ours", "optimal"],
      value: vennData[1].size,
    },
    {
      sets: ["ours", "baseline"],
      value: vennData[0].size,
    },
    {
      sets: ["baseline", "ours", "optimal"],
      value: vennData[2].size,
    },
  ];

  return (
    <>
      <input
        type="range"
        min="1"
        max="100"
        defaultValue={userPercent}
        onChange={(e) => setUserPercent(+e.target.value)}
      />
      {userPercent}
      <Venn
        seriesData={formattedVennData}
      />
    </>
  );
}

function Venn(props) {

  const { seriesData } = props;

  const chartOptions = {
    series: [
      {
        type: "venn",
        data: seriesData,
      },
    ],
  };

  return (
    <>
      <HighchartsReact
        highcharts={Highcharts}
        options={chartOptions}
        // key={new Date().getTime()} // if used, forces component to be loaded from scratch
      />
    </>
  );
}

拖动滑块到某些随机位置时，控制台抛出错误：

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Object.draw (venn.src.js:601:21)
    at venn.src.js:1752:21
    at Array.forEach (<anonymous>)
    at b2.drawPoints (venn.src.js:1742:17)
    at a2.render (highcharts.src.js:38426:21)
    at a2.redraw (highcharts.src.js:38476:17)
    at highcharts.src.js:30979:25
    at Array.forEach (<anonymous>)
    at a2.redraw (highcharts.src.js:30977:17)

The above error occurred in the <ForwardRef> component:

    at http://localhost:5173/node_modules/.vite/deps/highcharts-react-official.js?v=5fa2073c:86:36
    at Venn (http://localhost:5173/src/App.tsx?t=1681816117656:287:13)
    at App (http://localhost:5173/src/App.tsx?t=1681816117656:26:43)

已确认不是数据问题——给HighchartsReact组件添加key={new Date().getTime()}强制重新渲染时，所有韦恩图都能正常加载，但会丢失平滑过渡动画，而这是可视化的核心需求。请问该错误的成因是什么？

错误成因分析 #

这个错误是Highcharts韦恩图模块在数据更新时的过渡动画逻辑缺陷导致的：

• 当滑块快速切换数据时，韦恩图组件在执行平滑过渡动画的过程中，内部维护的元素状态（比如某些节点的几何数据）出现了null或undefined值，后续代码尝试用Object.keys()处理这些无效值，触发了类型错误。
• 强制重新渲染（加key）之所以能解决，是因为每次都创建了全新的图表实例，跳过了原实例的动画过渡逻辑，自然不会触发状态异常，但代价就是丢失了过渡效果。

具体来说，在venn.src.js的draw方法中，代码尝试遍历某个本应是对象的变量的键，但该变量在动画中途变成了null/undefined——这是因为新旧数据切换时，韦恩图的布局计算和动画帧不同步，导致部分内部状态未正确初始化或被提前清空。

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