React render FusionChart消耗API休息

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

dataSource结构的格式不正确，您获得的响应只有对象数组，但是数据源将值作为对象，其中数据道具包含您正在响应的值，在响应中字

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

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