Question

我想使用ChartJS和ReactJS创建图形。我遇到的问题是我无法将我的数据数组加载到图表上。

没有记录的错误，这是当前图表的外观：

我认为错误可能是我用来传递数据的chartData对象：

  chartData:{
    labels: this.timeDataArray,
    datasets: this.priceDataArray,
    backgroundColor:['rgba(255,99,132,0.6)']
  }

我将 react-chartjs-2 用作图表的模块，并获取http请求。

这是我的完整代码：

export class Chart extends Component{
  constructor(props){
    super(props);
    this.state = {
        isLoading: false,
        data: [],
      chartData:{
        labels: this.timeDataArray,
        datasets: this.priceDataArray,
        backgroundColor:['rgba(255,99,132,0.6)']
      }
    }
  }

  componentDidMount(){
    this.fetchData();
  }

  fetchData(){
    fetch("https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=600")
    .then(response => response.json())
    .then(data=>{
      var fetchedData = data.Data;
      var timeDataArray = [];
      var priceDataArray = [];
      console.log(timeDataArray)
      console.log(priceDataArray)
      for(var x = 0; x < fetchedData.length;x++){
        var exampleTimeData = fetchedData[x].time
        var examplePriceData = fetchedData[x].high
        timeDataArray.push(exampleTimeData)
        priceDataArray.push(examplePriceData)

      }

    })
    .catch(error => console.log("parsing failed", error))
  }

    render(){
        return(
          <div className="chart">
            <Line
              data={this.state.chartData}
              options={{
                maintainAspectRatio:false
              }}
            />
          </div>
        )
    }
}

问题：为什么我传递带有时间戳记的label属性并将实际数据作为dataset的情况下，为什么我的数据没有绘制？

Answer 1

我不知道它现在是我的实验室桌面还是什么，但是运行它之后，我需要调整窗口大小并更新图形以显示数据。

export default class Chart extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isLoading: false,
            chartData: {
                labels: ['First', 'Second', 'Third', 'Fourth'],
                datasets: [
                    {
                        label: ['My Chart'],
                        data: [100, 200, 300, 400],
                        backgroundColor: ['#26331d'],
                        borderWidth: 1,
                        borderColor: '#777',
                        hoverBorderWidth: 3,
                        hoverBorderColor: '#000'
                    }
                ]
            }
        }
    }

    componentDidMount() {
        this.fetchData()
    }

    fetchData() {
        var timeDataArray = []
        var priceDataArray = []
        fetch(
            'https://min-api.cryptocompare.com/data/histoday?fsym=BTC&tsym=USD&limit=50'
        )
            .then(response => response.json())
            .then(data => {
                var fetchedData = data.Data

                console.log(timeDataArray)
                console.log(priceDataArray)

                for (var x = 0; x < fetchedData.length; x++) {
                    var exampleTimeData = fetchedData[x].time
                    var examplePriceData = fetchedData[x].high
                    timeDataArray.push(exampleTimeData)
                    priceDataArray.push(examplePriceData)
                }
            })
            .catch(error => console.log('parsing failed', error))
        this.setState({
            chartData: {
                labels: timeDataArray,
                datasets: [
                    {
                        label: ['Population'],
                        data: timeDataArray,
                        backgroundColor: ['#26331d', '#507935', '#63ef06', '#d0eabf'],
                        borderWidth: 1,
                        borderColor: '#777',
                        hoverBorderWidth: 3,
                        hoverBorderColor: '#000'
                    }
                ]
            }
        })
    }

    render() {
        return (
            <div className="chart">
                <Line
                    data={this.state.chartData}
                    width={200}
                    height={200}
                    options={{
                        maintainAspectRatio: false
                    }}
                />
            </div>
        )
    }
}

使用ReactJS和ChartJS创建图形

1 个答案: