如何使用HighCharts创建React面积图

o7jaxewo  于 2023-10-20  发布在  Highcharts
关注(0)|答案(1)|浏览(131)

我是react的新手,我想用react创建一个面积图,所以它看起来像这样:

我需要:

  • 显示2个不同的数据(在所附的例子中,如“使用”和“苏联/俄罗斯”
  • y轴应为百分比(25%,50%,75%,100%)
  • x轴应该是日期(5月24日,5月25日,5月26日...)

我找不到任何关于如何实现这种图表的例子。
有什么想法吗?或者一些示例代码的链接

e0uiprwp

e0uiprwp1#

下面是Highcharts React Wrapper中的面积图示例:

简化编码:

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";

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

    this.state = {
      options: {
        series: [
          {
            type: 'area',
            data: [1, 2, 3]
          }
        ],
      }
    };
  }

  render() {
    return (
      <HighchartsReact
        highcharts={Highcharts}
        options={this.state.options}
      />
    );
  }
}

render(<App />, document.getElementById("root"));

Demo:https://codesandbox.io/s/highcharts-react-demo-forked-hvtvky
参考资料:https://github.com/highcharts/highcharts-reacthttps://www.highcharts.com/blog/tutorials/highcharts-react-wrapper/

相关问题