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.jsHighchartsData(Highcharts);// 添加highcharts-moreHighchartMore(Highcharts);

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

  render() {    return (      <div>        <Hello name={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示例