Диаграмма не обновляется после изменения данных в реагирующих чартах - PullRequest
Новая
       27

Диаграмма не обновляется после изменения данных в реагирующих чартах

0 голосов
/ 01 апреля 2020

Я сделал линейный график с графиком реакции js. Диаграмма работает отлично, но когда я пытаюсь обновить диаграмму, она не обновляется. Хотя я могу изменить данные диаграммы. Пожалуйста помоги. Я пытаюсь обновить график по легенде клика. Я go через некоторые учебники и вижу, как функция обновления поможет мне. Но когда я пробую функцию обновления с моей строкой, она показывает ошибку с «неопределенной функцией обновления». 


import React from 'react';

import {Line} from 'react-chartjs-2';


const checkinsData={
    labels:['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'],
    datasets:[
        {
        label:"Day",
        backgroundColor:"blue",
        borderColor:'#333',
        borderWidth:2,
        lineTension:0.1,
        fill:true,
        data:[4,5,6,7,8,9,10,11,12,1,2,3,4]

        }


    ]
}



class CheckinGraph extends React.Component{
    constructor(props)
    {
        super(props)
        this.state={

        }
    }

    legendClick=function() {
        console.log("Legend click"+ checkinsData.labels);
        checkinsData.datasets.data=[100,120,200,25,56,78,80,90,70,100];
    }
    render()
    {
        return(
            <div className="col-md-12  default-shadow bg-white pd-30-0 border-radius-10 align-center">
            <Line
            redraw
        data={checkinsData}
        options={
            {
                title:{
                    text:'Total Check-ins',
                    fontSize:20,
                    display:true
                },
                legend:{
                    display:true,
                    position:'top',
                    onClick:this.legendClick
                }
            }
        }
        />
            </div>

        )
    }
}

export default CheckinGraph;

1 Ответ

1 голос
/ 01 апреля 2020

Ваш график будет обновляться / перерисовываться, когда ваш компонент получит новый реквизит или будет обновлено состояние. Поскольку данные вашей диаграммы, которые вы обновляете, не находятся в состоянии компонента, поэтому компонент не знает об изменении и не выполняет повторную визуализацию вашей диаграммы. Вы должны сообщить компоненту, что что-то изменилось, и теперь время перерисовать. Это может быть достигнуто путем: 1. добавления ваших данных в состоянии и последующего обновления данных по щелчку, но правильным способом (без изменения состояния) 2. добавлением случайного ключа в состоянии и обновлением ключа состояния после обновления не-состояния данные 

state = { key: Date.now() }


legendClick=function() {
        console.log("Legend click"+ checkinsData.labels);
        checkinsData.datasets[0].data=[100,120,200,25,56,78,80,90,70,100];
        this.setState({ key: Date.now() });
    }
...