react中用highcharts画蜘蛛图

前端之家收集整理的这篇文章主要介绍了react中用highcharts画蜘蛛图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
import React from ‘react‘@H_403_8@
import styles from ‘./Spider.css‘@H_403_8@
import Highcharts from ‘highcharts-release/highstock‘@H_403_8@
import ‘highcharts-release/highcharts-more‘@H_403_8@

type Props =@H_403_8@ {
  xData: Array,chartData: Array,title: String
}
class Spider extends React.Component {
  props: Props

  componentDidMount () {
    this@H_403_8@.draw()
  }

  draw () {
    const container = this@H_403_8@.refs.container
    Highcharts.chart(container,{
      chart: {
        backgroundColor: ‘transparent‘@H_403_8@,polar: true@H_403_8@,type: ‘line‘@H_403_8@
      },title: {
        text: this@H_403_8@.props.title,x: -20@H_403_8@
      },credits:{
        enabled: false@H_403_8@
      },tooltip: {
        shared: true@H_403_8@
      },legend: {
        align: ‘right‘@H_403_8@,verticalAlign: ‘top‘@H_403_8@,y: 70@H_403_8@,layout: ‘vertical‘@H_403_8@
      },xAxis: {
        categories: this@H_403_8@.props.xData,tickmarkPlacement: ‘on‘@H_403_8@,lineWidth: 0@H_403_8@
      },yAxis: {
        gridLineInterpolation: ‘polygon‘@H_403_8@,lineWidth: 0@H_403_8@,min: 0@H_403_8@
      },series: this@H_403_8@.props.chartData
    })
  }

  render () {
    return@H_403_8@ (
      <div ref=‘container‘ className={styles[‘container‘]} />
@H_403_8@    )
  }
}
export default Spider

猜你在找的React相关文章