Визуализация холста Chartjs поверх ранее смонтированного холста в React

Question

Я заметил это ранее, пытаясь исправить другую ошибку.При использовании точечной диаграммы в диаграммах enableCustomTooltips имеет значение true.Во всплывающих подсказках текст полупрозрачен.После перехода обратно на ту же страницу, где находится диаграмма, она становится темнее вплоть до 1,0.Пример: если цвет «rgba (102,102,102,0.2)», возврат на страницу 5 раз приведет к «rgba (102,102,102,1)».

Я полагаю, что проблема заключается в том, что внутри холста диаграммы нет полной размонтирования / уничтожения, но я безуспешно искал ответы, поскольку каждая страница будет размещаться на холсте диаграммы ».Мы используем Router5 для навигации, поэтому все страницы связаны с управлением состоянием.

Он передает Index> Presentation> Scatter

Index.js

import Presentation from './presentation';

@router('TeamPerformance')
class TeamPerformance extends BaseScreen {
    state = {
        tableData: null,
    };

    componentWillReceiveProps() {
        this.setState({
            loading: true,
            tableData: null,
            filters: {
                values: {
                    teams: []
                },
                options: {
                    teams: []
                }
            }
        }, this.retrieveData);
    }

    filterTeamDetail(id) {
        this.props.router.navigate('Team', { id }, { reload: true });
    }

    render() {
            return (
                <Container>
                            <Presentation
                                tableData={this.state.tableData}
                                filterTeamDetail={id => this.filterTeamDetail(id)}
                            />
                </Container>
            );
        }
    }
}

export default TeamPerformance;

Presentation.js

import { Chart } from './Scatter';
import { ChartOptions } from './components';
class TeamPerformancePresentation extends Component {
    static propTypes = {
        tableData: PropTypes.array.isRequired,
        filterTeamDetail: PropTypes.func.isRequired
    };

    state = {
        chartType: 'percentile',
        lineArr: [],
    };

    render() {
        const { tableData } = this.props;
        const { chartType, lineArr } = this.state;

        let chartData;
        let chartOptions;
        if (User.costPermission()) {
            const dataArr = [];
            const labelArr = [];
            if (chartType === 'percentile') {
                weightedData.forEach((row) => {
                    if (row.hidden) {
                        return;
                    }

                    dataArr.push({
                        x: (row.graphPerformance.percentile) * 100,
                        y: (1 - row.cost.percentile) * 100,
                        label: row.name ? row.name : row.name.value
                    });

                });
            }

            chartData = {
                labels: labelArr,
                datasets: [
                    {
                        label: '1',
                        data: dataArr,
                    },
                    {
                        label: '2',
                        data: lineArr,
                ]
            };

            chartOptions = {
                legend: {
                    display: false
                },
                tooltips: {
                    enabled: false
                },
                enableCustomTooltips: true,
                axisGuard: true,
                onClick: (evt, item) => {
                    if (item.length) {
                        const team = weightedData[item[0]._index];
                        this.props.filterTeamDetail(team.id.value);
                    }
                }
                }
            };
        }
        return (
            <div>
                <Chart.Scatter
                    data={chartData}
                    height={150}
                    options={chartOptions}
                />
            </div>
            )
        );
    }
}

export default TeamPerformancePresentation;

Scatter.js

import { Chart } from 'chart.js';
import { Scatter } from 'react-chartjs-2';
import { Container, Headline, SubHeadline } from './components';

export default class ScatterChart extends React.Component {
    // Draws a custom tooltip
    static drawTooltip(ctx, dataset, index, element, hover) {
        const fontSize = 12;
        ctx.font = Chart.helpers.fontString(fontSize, 'normal', 'Helvetica Neue');
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'left';
        const data = dataset.data[index];
        const label = data.label;
        const labelSize = ctx.measureText(label); // Gets the size of the text element
        const position = element.tooltipPosition();

        const radius = 6;
        const start = { x: position.x - radius, y: position.y - fontSize - radius };
        const width = labelSize.width + (radius * 2);
        const height = fontSize + 12;

        ctx.lineJoin = 'round';
        ctx.lineWidth = radius;
        ctx.fillStyle = hover ? '#333' : 'rgba(255,255,255,0)';
        ctx.strokeStyle = hover ? '#333' : 'rgba(255,255,255,0)';
        ctx.strokeRect(start.x + (radius / 2), start.y + (radius / 2), width - radius, height - radius);
        ctx.fillRect(start.x + (radius / 2), start.y + (radius / 2), width - radius, height - radius);
        ctx.fillStyle = hover ? '#FFF' : 'rgba(102,102,102,0.3)';
        ctx.fillText(label, position.x, position.y - (fontSize / 2));
    }

    state = {
        pointIndex: null
    };

    componentWillMount() {
        Chart.plugins.register({
            beforeDatasetsUpdate: (chartInstance) => {(Irrelevant code)
            },
            afterDatasetsDraw: (chartInstance) => {
                // Create the custom tooltips
                if (chartInstance.config.options.enableCustomTooltips) {
                    const ctx = chartInstance.chart.ctx;
                    chartInstance.data.datasets.forEach((dataset, i) => {
                        const meta = chartInstance.getDatasetMeta(i);
                        if (!meta.hidden && i === 0) {
                            meta.data.forEach((element, index) => {
                                let hover = false;

                                if (index === this.state.pointIndex) {
                                    hover = true;
                                }
                                ScatterChart.drawTooltip(ctx, dataset, index, element, hover);
                            });
                        }
                    });
                }
            },
            afterEvent: (chartInstance, e) => {
                if (chartInstance.config.options.enableCustomTooltips) {
                    const point = chartInstance.getElementAtEvent(e)[0];
                    if (!point || typeof point._index === 'undefined' || point._datasetIndex === 1) {
                        this.state.pointIndex = null;
                    } else {
                        this.state.pointIndex = point._index;
                    }
                }
            }
        });
    }

    componentWillUnmount() {
    }

    render() {
        const {
            height,
            options,
            data,
        } = this.props;

        return (
            <Container>
                <Scatter data={data} height={height} options={options} />
            </Container>
        );
    }
}