Chartjs-2 (React), линии не появляются - PullRequest
Новая
       20

Chartjs-2 (React), линии не появляются

0 голосов
/ 18 сентября 2018

Когда я console.log (this.state) в App.js, объект данных появляется в браузере devtool, но без изменений на экране.Нет строк, нет вариантов, ничего.Когда я 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;

1 Ответ

0 голосов
/ 22 июня 2019

Попробуйте вот так .. Это работает для меня:

npm install --save response-chartjs-2 chart.js

На вашей странице импортируйте такие вещи, как: полоса, линия и т. д. согласно требованию.

import {Donut, Bar, Line, Pie} из'act-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 }}
 />

Надеюсь, это работает нормально.

...