雷达图在 React Highcharts 中不起作用答案

【问题标题】：Radar Chart Not working in React Highcharts雷达图在 React Highcharts 中不起作用
【发布时间】：2021-06-21 07:34:39
【问题描述】：

我想用react high图表来渲染雷达图，但是在编写了下面的代码之后，我得到的折线图格式并不完全是我所实现的预期输出，我试图以雷达格式获取图表。

  {
                
            chart: {
                renderTo: 'container',
                polar: true,
                type: 'line'
            },
            credits: {
                enabled: false
            },
            
            title: {
                text: '',
               
            },
            xAxis: {
                categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 
                        'Information Technology', 'Administration'],
            },
                
            yAxis: {
                gridLineInterpolation: 'polygon',
                lineWidth: 0,
                min: 0
            },
            series: [{
                name: 'Allocated Budget',
                data: [43000, 19000, 60000, 35000, 17000, 10000],
                pointPlacement: 'on'
            }, {
                name: 'Actual Spending',
                data: [50000, 39000, 42000, 31000, 26000, 14000],
                pointPlacement: 'on'
            }]
        
        }

组件

<ReactHighcharts config={radar}></ReactHighcharts>

导入

import ReactHighcharts from 'react-highcharts';

我无法以雷达类型渲染，而是类似于折线图

【问题讨论】：

标签： javascript reactjs highcharts radar-chart react-highcharts

【解决方案1】：

记得包含必要的模块：

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import HC_more from "highcharts/highcharts-more";

// init the module
HC_more(Highcharts);

您将在这里找到一个工作演示： https://stackblitz.com/edit/react-hujz1u?file=index.js

【讨论】：

我正在尝试替换它，遇到以下错误“无法读取未定义的属性'Core/Chart/Chart.js'”
@mantenavarma 你能不能也展示一下你的导入是什么样子的？
从 'react-highcharts' 导入 ReactHighcharts；从“highcharts/highcharts-more”导入 HighchartsMore； HighchartsMore(ReactHighcharts.Highcharts);
在我应用后你共享的导入语句我变得空了，甚至图表都没有呈现，所以我保持在导入语句之上

【解决方案2】：

导入HighchartsMore 依赖项，如下所示。

import ReactHighcharts from "react-highcharts";    
import HighchartsMore from "highcharts/highcharts-more";
HighchartsMore(ReactHighcharts.Highcharts);

HighchartsMore 在 Highcharts 之上添加了一些额外的功能，而无需修改其核心逻辑。包括这个文件，也让我们可以使用一些在“原始”高位图中不存在的图表类型，例如范围图、气泡图、极坐标图等。

工作代码 - https://codesandbox.io/s/frosty-snow-prkfs?file=/src/App.js

【讨论】：

我正在尝试替换它，遇到以下错误“无法读取未定义的属性'Core/Chart/Chart.js'”