Реагировать на рендеринг FusionChart, использующий API Rest

Question

Я пытаюсь создать график, использующий остальные API, но он не работает. Появится сообщение «Нет данных для отображения». Я пробовал с Chart js и 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