我试图在Next.js项目中添加一个可变半径饼图。我已经下载了Highcharts和Highcharts React Wrapper的最新版本,并导入了它们:
import styles from '../../src/styles/VariableRadiusPie.module.css'
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';
import variablePie from 'highcharts/modules/variable-pie';
variablePie(Highcharts);
下面是我试图渲染的组件:
const RadiusPie = ( { prop } ) => {
const options = {
chart: {
type: 'variablepie'
},
title: {
text: 'Variable Radius Pie Chart'
},
series: [{
name: 'Sales',
data: [{
name: 'Product A',
y: 45,
z: 10
}, {
name: 'Product B',
y: 25,
z: 5
}, {
name: 'Product C',
y: 20,
z: 15
}, {
name: 'Product D',
y: 10,
z: 20
}]
}]
};
return (
<>
<div className={styles.RadiusPieParent}>
<div className={styles.RadiusTitle}>
<div className={styles}>
<p>Revenue By Geographical Location</p>
</div>
</div>
<div className={styles.RadiusPie}>
<HighchartsReact highcharts={Highcharts} options={options} constructorType={''} />
</div>
</div>
</>
)
}
export default RadiusPie;
不幸的是,我遇到了错误
TypeError:无法读取未定义的属性(阅读“Core/Series/SeriesRegistry.js”)
我相信错误源于这一行代码:
variablePie(Highcharts);
但删除这一行后,我出现了错误:
错误:Highcharts错误#17:www.highcharts.com/errors/17/?missingModuleFor=variablepie
我不知道如何摆脱这个错误,任何帮助将不胜感激。
1条答案
按热度按时间b4qexyjb1#
重新安装
highcharts
:尝试像这样调整您的导入:
进口:
你的constructorType是空的,因为你想让它为空吗?否则我会这样做: