取得できませんデータがapexchartsのために正しくフォーマット

ウィルRollason:

私はAPIからこのようなデータを受信します

{
    "Bob Knight": 30774.72000002,
    "Samuel Herman": 10310.61000004,
    "Lucie Perry": 26308.41,
    "Andreas Smith": 8960.189999999999,
    "Frederic Smith": 2029.5000000599998,
}

私のアプリが、私は何も表示に頂点を取得するための正しい方法でデータをフォーマットすることができないように反応して、私は頂点のチャートを使用して棒グラフでこれを表示しようとしています。私はこのようなJavaScriptで書式設定しようとしています:

{
    {x: "Bob Knight", y:"30774.720002"},
    ...
}

それは何もレンダリングされません。しかし、ドキュメントが示唆するものと思われます。以下は私のコンポーネントの耐用ビットであり、

constructor(props) {
        super(props);
        this.state = {
            options: {
                chart: {
                    id: "basic-bar"
                },
                xaxis: {
                    type: 'category'
                }
            },
            values: []
        }
    }

    componentDidUpdate(prevProps) {
        if (!equal(this.props.selectedDate, prevProps.selectedDate))
        {
            var m = moment(this.props.selectedDate).format("M");
            var y = moment(this.props.selectedDate).format("YYYY");
            axios.get('http://localhost:8080/opportunity/owner/' + y + '/' + m)
                .then(res => {
                    values = res.data;
                    this.setState({
                        values
                    })
                })
                .catch(console.log)
        }
    }

render(
<Chart series = {this.state.values} type ='bar' options ={this.state.options}/>
オイゲンSunic:

const obj = {
  "Bob Knight": 30774.72000002,
  "Samuel Herman": 10310.61000004,
  "Lucie Perry": 26308.41,
  "Andreas Smith": 8960.189999999999,
  "Frederic Smith": 2029.5000000599998,
}

const arr = Object.entries(obj).map(x => ({
  'x': x[0],
  'y': x[1]
}))
console.log(arr)

おすすめ

転載: http://43.154.161.224:23101/article/api/json?id=294185&siteId=1