如何在react中使用chart.js映射多个图表

IT技术 reactjs chart.js
2021-05-23 16:44:02

我能够分别呈现每个图表,但我不知道如何同时呈现多个图表。这是我的代码:

import React, { Component } from "react";
import {Line} from 'react-chartjs-2';

import axios from 'axios';

class Chart extends Component {
    constructor(props) {
        super(props);
        this.state = {
           chartData: {},
           data: []
      }
    }

    componentDidMount() {
        axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=2&page=1&sparkline=true')

        .then(res => {

            const x = res.data;
            let y = [];
            x.forEach(element => {
                y.push(element.sparkline_in_7d.price)
            })

             console.log(y);

            this.setState({ 

                    chartData: {
                        labels: y,
                        datasets:[{
                            data: y,
                        }
                     ]
                    },
                    data: y

            })
        })
    }


    render() {
        return (
            <div className="chart">


         //*WORKS*
              {/* {this.state.data.map((n, index) => {
                               return (
                                <li key={index}>{n}</li>
                            );
                })} */}


       //*DOES NOT WORK*
               {this.state.chartData.map((n, index) => {
                               return (

                                <Line key={index} data={n}/>
                            );
                })} 



            </div>
        );
    }
}

export default (Chart);

通常我在映射数据时没有任何问题,但是我在使用 chartjs 时遇到了问题,因为当我尝试这个时它说它不是一个函数。任何帮助在这里将不胜感激。

1个回答

chartData 应该是一个数组。

尝试以下方法。

//init state

this.state = {
   chartData: [],
}


//service inside componentDidMount

axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=2&page=1&sparkline=true')
  .then(res => {
      const x = res.data;
      let chartData = [];
      x.forEach(element => {
        chartData.push({
          labels: element.sparkline_in_7d.price,
           datasets:[{data: element.sparkline_in_7d.price}]
         });
      });
     this.setState({chartData});
})

这是小提琴。 https://codesandbox.io/s/sharp-wildflower-23hy7

希望它会帮助你。