React呈现FusionChart使用API

Question

我正在尝试创建一个使用api rest的图表，但是，它不起作用。出现消息"No data to display“(没有数据可显示)。我尝试使用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结构的格式不正确，您得到的响应具有唯一的对象数组，但是数据源将值作为对象，其中数据属性包含您在响应中获得的值(用react的话来说

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

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