React- D3 PieChart API 在 class 组件中使用 axios 进行集成（如何获取数据）

Question

如何获取数据？

这是我的组件代码：

import React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { Bar } from 'react-chartjs-2';
import { makeStyles } from '@material-ui/styles';
import axios from 'axios'
import ReactD3 from "react-d3-components";
var PieChart = require('react-d3-components').PieChart;


//dummy data from d3 
var data = {
  label: 'something',
  values: [
    { x: 'SomethingA', y: 10 },
    { x: 'SomethingB', y: 4 },
    { x: 'SomethingC', y: 3 },
    { x: 'SomethingD', y: 3 },
    { x: 'SomethingE', y: 1 }
  ]
};


//tooltip
var tooltipScatter = function(x, y) {
  return "x: " + x + " y: " + y;
};
var sort = null;

class UsersByDevic extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
    }
  }

  componentDidMount() {
    axios.get('http://127.0.0.1:5000/data')
      .then(response => {
        console.log("!!!!!!!!!!!!!!!!!!!!!!!!!", response.data);
        this.setState({
          data: response.data.pie_chart,
        })
        console.log("@@@@@@@@@@@", this.state.data)
      })
      .catch(error => {
        console.log("CHECK ERROR", error)
      })
  }

  render() {
    const { data } = this.state
    return (
      <div>
        { data.length 
          ? data.map(data => <div>
            <PieChart
              data={data}
              width = {500}
              tooltipHtml={tooltipScatter}
              height={500}
              margin={{
                top: 10,
                bottom: -200,
                left: 100,
                right: 100
              }}
              sort={sort}
            />
          </div>
        ) : null
      }
      </div>
    )
  }
}

UsersByDevic.propTypes = {
  className: PropTypes.string
};

export default UsersByDevic;

data = {this.state.data} 给出以下错误：

TypeError: data.map is not a function

无法在 render 方法中获取数据

这是需要使用axios方法获取的数据

{
  "pie_chart": [
    { "label": "Equity", "value": 300 },
    { "label": "Real-estate", "value": 270 },
    { "label": "Debt", "value": 230 },
    { "label": "Bullion", "value": 180 },
    { "label": "Insurance", "value": 20 }
  ]
}

出现错误：

1.TypeError: Cannot read property 'length' of undefined pie E:/TASK/template/react-material-dashboard-master/node_modules/react-d3-components/node_modules/d3/d3.js:6633 6630 | d3.layout.pie = function() { 6631 | var value = Number, sort = d3_layout_pieSortByValue, startAngle = 0, endAngle = τ, padAngle = 0; 6632 | function pie(data) { 6633 | var n = data.length, values = data.map(function(d, i) { | ^ 6634 | return +value.call(pie, d, i);

或

Each child in a list should have a unique "key" prop

Answer 1

您从 API 获取的数据格式不是 PieChart 组件期望的格式。

您必须将获得的数据格式化为以下格式：

{
  label: 'Cost Distribution',
  values: [
    { x: "Equity", y: 300 },
    { x: "Real-estate", y: 270 },
    { x: "Debt", y: 230 },
    { x: "Bullion", y: 180 },
    { x: "Insurance", y: 20 }
  ]
}

设置格式并使用此格式设置 data 后，您还必须更改 render 方法中的条件：

render() {
  const { data } = this.state;
  return (
    <div>
    {
      data 
      ? <div>
          <PieChart
            data={data}
            width={500}
            tooltipHtml={tooltipScatter}
            height={500}
            margin={{ top: 10, bottom: -200, left: 100, right: 100 }}
            sort={sort}
          />
        </div>
      : null
    } 
    </div>
  );
}

Here's a Working Sample Demo for your ref.

React- D3 PieChart API 在 class 组件中使用 axios 进行集成（如何获取数据）

React- D3 PieChart API integration using axios in class component (how to fetch the data)

api

render

pie-chart

reactjs

axios