Question

我有一个带有静态标签的甜甜圈图-所发生的变化只是带有标签值的数据。全部都是关于过滤数据的。但是我有一个奇怪的问题，我不知道怎么回事。

例如，我有这样的东西： labels with hidden option set to true 我发现Array中的“ undefined”值会使项目隐藏，因此在图片中可能是例如[234，undefined，21，undefined，8]。

好的，这似乎很好，但是当我使用过滤器面板更改应用程序中的数据时，具有此Array值的props正在更改，它不会重新呈现标签视图，例如，当我将array更改为[234，100，21 ，undefined，8]，位置标签1处的标签应将“隐藏”属性更改为false-不会发生，我也不知道为什么。

我仅在此处粘贴render方法，如果您需要了解其他内容，请告诉我：

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);
                    }
                }
            );

React中的ChartJS-即使触发了render方法，更改数据集属性也不会更改视图

0 个答案: