字符-2(反应)，线不出现

Question

当I console.log(this.state)在App.js中时，数据对象出现在开发工具浏览器上，而屏幕上没有变化。没有台词，没有选择，什么都没有。当I console.log(this.state)在Chart.js中时，对象出现两次，但始终为空。一次没有错误消息，但不是更好。我想创造两条线，我不知道这是不是正确的方法。但我不认为问题来自那里

App.js

import React, { Component } from 'react';
import './style/App.css';
import axios from 'axios'
import Table from './components/table/Table'
import Chart from './components/Chart'


class App extends Component {

    state = {
      tabData: [],
      chartData: {}
    }

    componentWillMount = () => {
      this.getDataFromServer()
    }

    getDataFromServer = () => {
      axios.get("http://localhost:8000")

      .then((response) => {
        const twentyObj = response.data.splice(0,20);

        const time = twentyObj.map(item =>
          item.timestamp
        );

        const cacData = twentyObj.map(item =>
          item.stocks.CAC40
        );

        const nasData = twentyObj.map(item =>
          item.stocks.NASDAQ
        );

        this.setState({
          tabData:twentyObj,

          chartData:{
            labels: [time],
            datasets:[

              { label:"CAC40",
                data:[cacData],
                fill: false,
                lineTension: 0.1,
                backgroundColor: 'rgba(75,192,192,0.4)',
                borderColor: 'rgba(75,192,192,1)',
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: 'rgba(75,192,192,1)',
                pointBackgroundColor: '#fff',
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: 'rgba(75,192,192,1)',
                pointHoverBorderColor: 'rgba(220,220,220,1)',
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
              },

              { label:"NASDAQ",
                data:[nasData],
                fill: false,
                lineTension: 0.1,
                backgroundColor: 'rgba(75,30,192,0.4)',
                borderColor: 'rgba(75,30,192,1)',
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: 'rgba(75,30,192,1)',
                pointBackgroundColor: '#fff',
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: 'rgba(75,30,192,1)',
                pointHoverBorderColor: 'rgba(220,220,220,1)',
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
              }
            ],
          }
        })
        console.log(this.state)
        })
        .catch(function (error) {
          console.log(error);
        })

    }


  render() {

    return (
      <div className="App">
        <h1>TEST Project</h1>
        <Chart linesData={this.state.chartData}/>
        <Table stateData={this.state.tabData}/>

      </div>
    );
  }
}

export default App;

Chart.js

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


class Chart extends Component{

    state = {
        chartLinesData:this.props.linesData
    }

    render(){
        console.log(this.state)
        return(
            <Line data={this.state.chartLinesData}
                  width={300}
                  height={150}
                  options={{
                    maintainAspectRatio: false
                  }}
            />
        )
    }
}

export default Chart;

Answer 1

就像这样..。这对我来说很管用：

npm安装-保存反应-图表-2 chart.js

在您的页面中，根据需要导入如下内容:栏、行等。

从“react chartjs-2”进口{ Doughnut，Bar，Line，Pie }；

在构造函数中，填充状态中的数据集：

 this.state = {
            lineChartData: {
                labels: ['01', '02', '03', '04', '05', '06'],
                datasets: [{
                    label: 'X',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)'

                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)'

                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        } 

最后，在jsx中调用组件/图：

<Line
       data={this.state.lineChartData}
       options={{ maintainAspectRatio: true }}
 />

希望这一切都能顺利。