Question

当我在App.js中使用console.log（this.state）时，数据对象出现在devtool浏览器上，但屏幕上没有变化。没有行，没有选择，什么都没有。当我在Chart.js中console.log（this.state）时，对象出现两次，但始终为空。一次没有错误消息，但这并不更好。我想创建两行，不知道这是正确的方法。但是我不认为问题出在那

App.js

bool

Chart.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;

Answer 1

尝试这样。.这对我有用：

npm install-保存react-chartjs-2 chart.js

根据需要在页面中导入：条，线等。

从“ react-chartjs-2”导入{甜甜圈，条形，线形，饼形}；

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

 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 }}
 />

希望这很好。

Chartjs-2（反应），不出现线条

1 个答案: