如何在Hightcharts中设置垂直条形图|我作为组件传入。如何作为道具发送

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="chartContainer"></div>

// 获取容器元素
var container = document.getElementById('chartContainer');

// 创建垂直条形图
var chart = Highcharts.chart(container, {
    chart: {
        type: 'column' // 设置图表类型为垂直条形图
    },
    title: {
        text: '垂直条形图示例' // 设置图表标题
    },
    xAxis: {
        categories: ['类别1', '类别2', '类别3'] // 设置X轴分类
    },
    yAxis: {
        title: {
            text: '数值' // 设置Y轴标题
        }
    },
    series: [{
        name: '数据系列1',
        data: [1, 2, 3] // 设置数据系列
    }]
});

import React from 'react';
import Highcharts from 'highcharts';

class VerticalBarChart extends React.Component {
  componentDidMount() {
    this.createChart();
  }

  createChart() {
    const { data } = this.props;

    Highcharts.chart(this.container, {
      chart: {
        type: 'column'
      },
      title: {
        text: '垂直条形图示例'
      },
      xAxis: {
        categories: data.categories
      },
      yAxis: {
        title: {
          text: '数值'
        }
      },
      series: [{
        name: '数据系列1',
        data: data.series
      }]
    });
  }

  render() {
    return <div ref={el => this.container = el}></div>;
  }
}

export default VerticalBarChart;

import React from 'react';
import VerticalBarChart from './VerticalBarChart';

class App extends React.Component {
  render() {
    const chartData = {
      categories: ['类别1', '类别2', '类别3'],
      series: [1, 2, 3]
    };

    return (
      <div>
        <h1>应用示例</h1>
        <VerticalBarChart data={chartData} />
      </div>
    );
  }
}

export default App;

import React from 'react';
import Highcharts from 'highcharts';

class VerticalBarChart extends React.Component {
  componentDidMount() {
    this.createChart();
  }

  createChart() {
    const { data } = this.props;

    Highcharts.chart(this.container, {
      chart: {
        type: 'column'
      },
      title: {
        text: '垂直条形图示例'
      },
      xAxis: {
        categories: data.categories
      },
      yAxis: {
        title: {
          text: '数值'
        }
      },
      series: [{
        name: '数据系列1',
        data: data.series
      }]
    });
  }

  render() {
    return <div ref={el => this.container = el}></div>;
  }
}

class App extends React.Component {
  render() {
    const chartData = {
      categories: ['类别1', '类别2', '类别3'],
      series: [1, 2, 3]
    };

    return (
      <div>
        <h1>应用示例</h1>
        <VerticalBarChart data={chartData} />
      </div>
    );
  }
}

export default App;