ChartJS в React - изменение реквизита набора данных не меняет представление, даже когда запущен метод рендеринга - PullRequest
Новая
       39

ChartJS в React - изменение реквизита набора данных не меняет представление, даже когда запущен метод рендеринга

0 голосов
/ 31 мая 2019

У меня есть кольцевая диаграмма со статическими метками - меняются только данные со значениями для меток. Это все о фильтрации данных. Но у меня странная проблема, и я не могу понять, что происходит.

Например, у меня есть что-то вроде этого: метки со скрытой опцией, установленной в true Я выяснил, что значение 'undefined' в Array делает объект скрытым, поэтому в случае с изображением это будет, например: [234, undefined, 21, undefined, 8].

Хорошо, кажется, все в порядке, но когда я использую панель фильтров для изменения данных в моем приложении, и реквизит с этим массивом значений меняется, это не перерисовывает представление метки, например, когда я изменяю массив на [234, 100, 21 , undefined, 8], метка в позиции метка 1 должна изменить свойство 'hidden' на false - этого не произойдет, и я не знаю почему.

Я вставляю сюда только метод рендеринга, если вам нужно узнать что-то еще, пожалуйста, скажите мне: 

render() {
    const chartOptions = {
        legend: {
            display: true,
            position: 'right',
            labels: {
                boxWidth: 12
            }
        }
    };

    const chartData =
        [{
            label: 'SomeLabel',
            data: this.props.chartData.values,
            yAxisId: 'yAxisA',
            type: 'doughnut',
            backgroundColor: ['#a3e1d4', '#dedede', '#9CC3DA', '#0475ad', '#f8ac59', '#ED5565', '#23c6c8', '#c2c2c2', '#1c84c6'],
        }];
    const title = (<h5>{this.props.title}</h5>);

    const doughnutData = {
        labels: this.props.chartData.labels,
        datasets: chartData
    };

    const clonedDoughnutData = Object.assign({}, doughnutData);

    const chart = (
        <CustomDoughnut
            data={clonedDoughnutData}
            options={chartOptions}
            height={150}
        />
    );
    const noData = (<NoData isDataVolume={false}/>);
    const waveLoader = (<WaveLoader loading={this.props.loading}/>);
    return (
        <div>
            <Tile
                loading={this.props.overlayLoading}
                title={title}
                content={this.props.loading ? waveLoader : this.props.chartData.values.length > 0 ? chart : noData}
                dynamicElementsService={this.props.dynamicElementsService}
                parentView={this.props.parentView}
                element={this.props.element}
                status={this.props.status}
                label={this.props.title}
            />
        </div>
    );
}

РЕДАКТИРОВАТЬ 1: Все вычисления, которые я делаю в другом компоненте, затем я отправляю их на хранение, а затем я получаю их из хранилища в родительском компоненте и отправляю значения в качестве реквизита для компонента с рендерингом диаграммы.

Вот как я обрабатываю правильные значения для меток: 

                const SomethingValues = [];
            this.somethingLabels.forEach(element => {
                    if (analytics.chartData.Something.Map.get(element)) {
                        somethingValues.push(analytics.chartData.Something.Map.get(element));
                    } else {
                        somethingValues.push(undefined);
                    }
                }
            );
...