0

我正在创建一个天气应用程序,我在其中使用 OpenWeatherMap 来获取预报数据。我想在面积图中绘制类似于谷歌天气小部件的数据。

我找不到 D# 的太多文档,我找到了 react-d3-componetns npm 包。文档显示使用 ReactDOM.render

以下消费方式不起作用

import React from "react";
import ReactDom from 'react-dom';
import "./styles.css";
import   ReactD3 from "react-d3-components";


export class WeatherGraph extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          label: "somethingA",
          values: [
            { x: 0, y: 2 },
            { x: 1.3, y: 5 },
            { x: 3, y: 6 },
            { x: 3.5, y: 6.5 },
            { x: 4, y: 6 },
            { x: 4.5, y: 6 },
            { x: 5, y: 7 },
            { x: 5.5, y: 8 }
          ]
        }
      ]
    };
  }

  ReactDom.render(
  <ReactD3.AreaChart
    data={this.state.data}
    width={400}
    height={400}
    yOrientation='right' // if you do not provide right default left orientation for yAxis will be used
    margin={{top: 10, bottom: 50, left: 50, right: 10}}/>,
document.getElementById('location')
)
}

下面是codeandbox链接

https://codesandbox.io/s/weather-report-rgu7y-regtl

您能否建议正确的食用方法或参考任何示例?

4

0 回答 0