React中使用highcharts画玫瑰图

• npm install react-highcharts –save 安装highcharts 或者直接在StackBlitz — Online编辑器的左侧DEPENDENCIES 中添加 highcharts ，StackBlitz会自动添加依赖,import Highcharts from 'highcharts'引入highcharts
• 添加玫瑰图必需的两个文件 data.js和highcharts-more.js

import HighchartMore from 'highcharts/highcharts-more';
import HighchartsData from 'highcharts/modules/data'
// 添加data.js
HighchartsData(Highcharts);
// 添加highcharts-more
HighchartMore(Highcharts);

• 组件中渲染了table和chart的容器之后 在componentDidMount或者componentDidUpdate中获取chart的实例

  render() {
    return (
      <div>
        this.state.name} />
        {table}
        <div ref='chart'>div>
      div>
    );
  }
componentDidMount(){
    // options 是图表的配置
    this.chart=new Highcharts['Chart'](this.refs.chart,options)
  }

完整的代码戳这儿

---

参考

highcharts示例
react-highcharts
react-highcharts示例