react中用highcharts画蜘蛛图

最新推荐文章于 2023-06-06 22:39:39 发布

转载最新推荐文章于 2023-06-06 22:39:39 发布 · 547 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/susu8/p/9173988.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用React组件实现的高图表绘制应用案例，通过定义Spider组件并利用Highcharts库来展示极坐标系下的折线图。该组件接收x轴数据、图表数据及标题作为属性，并在页面加载完毕后进行图表的绘制。

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

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