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

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

import React from "react";
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";

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

    this.state = {
      chartOptions: {
        chart: {
          type: "line"
        },
        title: {
          text: "My chart"
        },
        series: [
          {
            data: [1, 2, 3]
          }
        ]
      },
      stockOptions: {
        rangeSelector: {
          selected: 1
        },
        title: {
          text: "AAPL Stock Price"
        },
        series: [
          {
            name: "AAPL",
            data: [
              [1147651200000, 67.79],
              [1147737600000, 64.98],
              [1147824000000, 65.26],
              [1147910400000, 63.18],
              [1147996800000, 64.51]
              // ...
            ],
            tooltip: {
              valueDecimals: 2
            }
          }
        ]
      }
    };
  }

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

export default App;

这个示例中，我们使用HighchartsReact组件来将Highcharts和Highstock集成到React应用程序中。我们首先定义了一个普通的Highcharts图表，然后定义了一个Highstock图表，并将`constructorType`属性设置为`stockChart`。接下来，我们将这些选项传递到HighchartsReact组件中，以便它可以呈现图表。