javascript - React 渲染 FusionChart 使用 API Rest

Question

我正在尝试创建一个使用 api 休息的图表，但是它不起作用。出现消息“无数据可显示”。我尝试使用 Chartjs 和 Echarts 并出现相同的错误。有人可以帮助我指出我哪里出错了吗？

我的代码:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import FusionCharts from "fusioncharts";
import Charts from "fusioncharts/fusioncharts.charts";
import ReactFC from "react-fusioncharts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

Charts(FusionCharts);

const dataSource = {
  "chart": {
    "caption": "Market Share of Web Servers",
    "plottooltext": "<b>$percentValue</b> of web servers run on $label servers",
    "showlegend": "1",
    "showpercentvalues": "1",
    "legendposition": "bottom",
    "usedataplotcolorforlabels": "1",
    "theme": "fusion"
  },
  "data": [] 
};

export default class App extends Component {
  state = {
    loading: true,
    pieConfigs: {}
  };
  componentDidMount() {
    fetch("https://private-afe609-testefront.apiary-mock.com/anual-percentage")
      .then(response => response.json())
      .then(response => {
        this.setState({
          loading: false,
          pieConfigs: {
            type: "Pie2d",
            width: 600,
            height: 400,
            dataFormat: "json",
            dataSource: response
          }
        });
      });
  }
  render() {
    if (this.state.loading) return <>Loading..</>;
    return <ReactFC {...this.state.pieConfigs} />;
  }
}

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

Answer 1

数据源结构的格式不正确，您获得的响应具有唯一的对象数组，但数据源将该值作为对象，其中数据 Prop 包含您在响应中获得的值， react 词

  pieConfigs: {
            type: "Pie2d",
            width: 600,
            height: 400,
            dataFormat: "json",
            dataSource: {
              data: response
            }
          }

这是一个沙盒演示 - https://codesandbox.io/s/delicate-snow-60ch8