react中用highcharts画蜘蛛图

import React from 'react'
import styles from './Spider.css'
import Highcharts from 'highcharts-release/highstock'
import 'highcharts-release/highcharts-more'

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

  componentDidMount () {
    this.draw()
  }

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

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

 

转载于:https://www.cnblogs.com/susu8/p/9173988.html