Question

我能够分别绘制每个图表，但是我不知道如何同时绘制多个图表。这是我的代码：

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这样做时会遇到问题，因为当我尝试这样做时，它说它不是一个函数。任何帮助，我们将不胜感激。

Answer 1

Encoder.LdapFilterEncode()应该是一个数组。

尝试以下方法。

chartData

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

希望它会对您有所帮助。

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

1 个答案: