react 使用highcharts 甘特图并加载highstock 的demo代码

以下是一个基于React的使用Highcharts和Highstock的甘特图示例代码：

import React from "react";
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import HighchartsGantt from "highcharts/modules/gantt";
import moment from "moment";

// 引入甘特图所需的模块
HighchartsGantt(Highcharts);

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      ganttOptions: {
        title: {
          text: "Highcharts Gantt Chart"
        },
        xAxis: {
          currentDateIndicator: true,
          min: moment().startOf("day").valueOf(),
          max: moment().endOf("day").valueOf()
        },
        yAxis: {
          uniqueNames: true
        },
        series: [
          {
            name: "Project 1",
            data: [
              {
                name: "Task 1",
                start: moment().startOf("day").valueOf(),
                end: moment().add(1, "days").valueOf()
              },
              {
                name: "Task 2",
                start: moment().add(2, "days").valueOf(),
                end: moment().add(4, "days").valueOf()
              },
              {
                name: "Task 3",
                start: moment().add(5, "days").valueOf(),
                end: moment().add(7, "days").valueOf()
              }
            ]
          }
        ]
      }
    };
  }

  render() {
    return (
      <div>
        <HighchartsReact highcharts={Highcharts} constructorType={"ganttChart"} options={this.state.ganttOptions} />
      </div>
    );
  }
}

export default App;

在这个示例中，我们首先引入了Highcharts Gantt模块，并使用`HighchartsGantt(Highcharts)`将其注册到Highcharts中。然后，我们定义了一个甘特图的选项对象，包含了一些示例数据，例如项目名称、任务名称、开始时间和结束时间。最后，我们将这些选项传递到HighchartsReact组件中，并将`constructorType`属性设置为`ganttChart`，以告诉组件呈现一个甘特图。