Highchart在react中使用雷达图

最新推荐文章于 2025-06-03 09:05:29 发布

Baymax627

最新推荐文章于 2025-06-03 09:05:29 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： highchart

本文链接：https://blog.youkuaiyun.com/jl381169437/article/details/78426575

前端专栏收录该内容

31 篇文章

订阅专栏

本文介绍了如何在React项目中引入Highcharts并正确配置雷达图和Treemap等图表的方法。特别注意highchartsMore只能使用一次，否则可能导致图表错乱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react中引入Highchart的雷达图时，在import中要有以下的写法：
github解决方案： https://stackoverflow.com/questions/33241358/how-to-import-highcharts-with-webpack-and-babel

补充一个问题，在同一个react项目中，highchartsMore(Highcharts)只能使用一次，否则可能造成雷达图错乱，解决办法是将所有的雷达图绘制代码放到同一个文件中去

// 雷达图的用法
import Highcharts from 'highcharts';
import highchartsMore from 'highcharts-more';
highchartsMore(Highcharts); // 这样包裹一下就ok了

// 下面是treemap的用法
import Highcharts from 'highcharts';
import heatmaps from 'highcharts/modules/treemap';
import treemaps from 'highcharts/modules/map';

treemaps(Highcharts);
heatmaps(Highcharts);