雷达图在 React Highcharts 中不起作用

问题描述

我想使用 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';

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

解决方法

导入 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

,

记得包含必要的模块：

m1 = df['source_system'] == 'B'
m2 = df['r_diff'] == 0
m3 = df.groupby('person_id')['r_diff'].shift(-1) == 0

df = df[m1 | m2 | m3]
print (df)
   person_id source_system  r_diff
0          1             A     NaN
1          1             B     0.0
2          1             B     9.0
4          1             A   574.0
5          1             B     0.0
7          1             A   136.0
8          1             B     0.0

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