在反应中构建人口图表时输出错误

Question

我对反应非常陌生，我正在尝试使用 Axios 从 API 获取人口数据并显示改变世界的加班人口。像这样的。

我正在尝试使用chart-race-react 构建它。存储库中只有一个示例，因此我尝试从该示例中获取提示。

我试过了：

import React, { Component } from 'react';
import BarChart from 'chart-race-react';

import axios from 'axios';
import './App.css';
const API_URL = 'https://example.json';

class App extends Component {
  state = {
    countries: []
  }

componentDidMount() {
axios.get(API_URL)
.then(response => response.data)
.then((data) => {
  this.setState({ countries: data })
  console.log(this.state.countries)
 })
}

  render() {

    return (
      <div style={{width: "500px"}}>
        <BarChart 

    start={true}
    data = {this.state.countries}
    len = {this.state.countries.length}
    timeout={400}
    delay={100}
    colors = "rgb(133, 131, 131)"
    timeline = {Array(20).fill(0).map((itm, idx) => idx + 1)}
    timelineStyle={{
      textAlign: "center",
      fontSize: "50px",
      color: "rgb(148, 148, 148)",
      marginBottom: "100px"
    }}
    textBoxStyle={{
      textAlign: "right",
      color: "rgb(133, 131, 131)",
      fontSize: "30px",
    }}
    barStyle={{
      height: "60px",
      marginTop: "10px",
      borderRadius: "10px",
    }}
    width={[15, 75, 10]}

    maxItems = {this.state.countries.length}

    />
  </div>
    );
  }
}
export default App;

我得到一个输出，其中一个数字出现在浏览器中，来自1 to 20。我怎样才能让我的应用看起来完全像上面的gif？我在这里做错了什么？

Answer 1

没有“颜色”属性。文档提到了属性“colors”，它是一个对象。在您的情况下，颜色对象将具有代表国家/地区的键（就像在您的“数据”中一样）和代表颜色的值