我已经在一个.json文件中保存了100组维恩图数据,我正在使用React,Highcharts和官方的highcharts-react Package 器,让用户使用一个简单的滑块在每个维恩图之间转换。
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)
我知道这不是数据的问题,因为如果我将key={new Date().getTime()}
添加到HighchartsReact组件中,那么每次都从头开始加载,每个维恩图都可以正常加载。但是,如果我这样做,我就会失去维恩图之间的平滑动画,这就是可视化的全部意义。
有谁知道为什么会出错吗?
1条答案
按热度按时间vql8enpb1#
这是Highcharts核心中的一个错误,报告如下:https://github.com/highcharts/highcharts/issues/16946
现在,您可以使用建议的解决方法之一,例如:
现场演示:https://codesandbox.io/s/highcharts-reactt-5hvve1
API引用:https://api.highcharts.com/highcharts/chart.allowMutatingData