-1

我正在尝试在我的 React 项目中使用 funnel3d。我已导入以下模块并尝试显示来自 highcharts 官方文档https://www.highcharts.com/demo/funnel3d的示例图表

`import * as Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 import highcharts3d from "highcharts/highcharts-3d";
 import cylinder from "highcharts/modules/cylinder";
 import Funnel from "highcharts/modules/funnel3d.js";
 import HC_exporting from "highcharts/modules/exporting";
 cylinder(Highcharts);
 Funnel(Highcharts);
 highcharts3d(Highcharts);
 HC_exporting(Highcharts);



let funnelOptions = {
chart: {
    type: 'funnel3d',
    options3d: {
        enabled: true,
        alpha: 10,
        depth: 50,
        viewDistance: 50
    }
},
title: {
    text: 'Highcharts Funnel3D Chart'
},
plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b> ({point.y:,.0f})',
            allowOverlap: true,
            y: 10
        },
        neckWidth: '30%',
        neckHeight: '25%',
        width: '80%',
        height: '80%'
    }
},
series: [{
    name: 'Unique users',
    data: [
        ['Website visits', 15654],
        ['Downloads', 4064],
        ['Requested price list', 1987],
        ['Invoice sent', 976],
        ['Finalized', 846]
    ]
}]}
render() {
<HighchartsReact highcharts={Highcharts} options={funnelOptions} />
}
`

它给我一个错误“无法在 eval (VM399114 cylinder.js:13) at h (VM399114 cylinder.js:11) at eval (VM399114 cylinder.js:13) at评估（VM399112 PhaseFunnelChart.jsx:47）”。

在使用之前我需要导入任何其他模块吗？PhaseFunnelChart.jsx 是组件的名称。导入气缸模块有没有错误？

4

1 回答 1

1

可能您忘记在项目中添加 highcharts-3d 依赖项。我已经用你的代码准备了一个工作演示。

演示：https ://codesandbox.io/s/highcharts-react-demo-forked-pc9ez?file=/demo.jsx

API 参考：https ://www.highcharts.com/docs/chart-and-series-types/funnel-3d#setting-up

于 2021-08-23T08:50:50.530 回答