如何使用HighCharts创建React面积图

o7jaxewo 于 9个月前发布在 Highcharts

关注(0)|答案(1)|浏览(83)

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

我需要：

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

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

highcharts

来源：https://stackoverflow.com/questions/77045327/how-to-create-area-chart-with-react-using-highcharts

1条答案

按热度按时间

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-react https://www.highcharts.com/blog/tutorials/highcharts-react-wrapper/

赞(0）回复(0）举报 9个月前