雷达图在React Highcharts中不起作用

Question

​

我想使用react high chart呈现雷达图，但在编写下面的代码后，我得到的折线图格式并不完全是我正在实现的预期输出，而我正试图获得雷达格式的图表。

  {
                
            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';

我不能在雷达类型中渲染，而是类似于折线图

​

​

​

Answer 1

如下所示导入HighchartsMore依赖项。

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

HighchartsMore在Highcharts之上添加了一些额外的功能，而没有修改它的核心逻辑。包括这个文件，还允许我们使用“原始”highcharts中不存在的一些类型的图表，如极差、气泡、极地图表等。

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

Answer 2

记住要包含必要的模块：

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