Диаграмма. js больше не отображает всплывающие подсказки в React - PullRequest
0 голосов
/ 18 марта 2020

Всплывающие подсказки работали раньше, и теперь, когда я возвращаюсь к этой функции, всплывающие подсказки больше не отображаются / работают. Я попытался изменить исходную карту в веб-пакете, z-index диаграммы и закомментировать различные части параметров всплывающей подсказки, но безрезультатно. Любая помощь будет принята с благодарностью!

BurndownGraph.jsx

import React, { Component } from 'react';
import Chart from 'chart.js';

import { formatDollarsToK } from '../../../utils/formatter';

class BurndownGraph extends Component {
    constructor (props) {
        super(props);
        this.chartRef = React.createRef();

        this.state = {
            data: [],
            labels: []
        };
    }

    componentDidMount() {
        const myChartRef = this.chartRef.current.getContext("2d");

        new Chart(myChartRef, {
            type: "line",
            data: {
                // TODO Bring in data from backend endpoint
                labels: ["Jan '20", "Jan '21", "Nov '22", "Jan '23", "Jan '24"],
                datasets: [
                    {
                        label: "With Contribution",
                        data: [35000, 30000, 20000, 0, 0],
                        backgroundColor: "#326295",
                        pointRadius: 5,
                        pointBackgroundColor: 'white',
                        pointBorderColor: '#326295'
                    },
                    {
                        label: "Without Contribution",
                        data: [35000, 32500, 30000, 20000, 0],
                        pointRadius: 5,
                        pointBackgroundColor: 'white'
                    }
                ]
            },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                callback: formatDollarsToK,
                                stepSize: 10000,
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Remaining Balance',
                                fontColor: '#00263e',
                                fontSize: 18,
                                fontFamily: 'CircularStd-Medium',
                            },
                        },
                    ],
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Length of Loan',
                            fontColor: '#00263e',
                            fontSize: 18,
                            fontFamily: 'CircularStd-Medium'
                        },
                        gridLines: {
                            color: 'transparent'
                        }
                    }]
                    },
                    legend: {
                        position: 'bottom',
                        labels: {
                            fontColor: '#00263e',
                            fontSize: 18,
                            fontFamily: 'CircularStd-Medium',
                            boxRadius: '25%'
                        }
                    },
                    tooltips: {
                        titleFontFamily: 'CircularStd-Medium',
                        bodyFontFamily: 'CircularStd-Medium',
                        enabled: true,
                        callbacks: {
                            labelColor: function(tooltipItem, chart) {
                                if (tooltipItem.datasetIndex === 0) {
                                    return {
                                        backgroundColor: '#326295'
                                    };
                                } else {
                                    return {
                                        backgroundColor: 'rgba(0, 0, 0, 0.1)'
                                    };
                                }
                            }
                        }
                    }
                }
        });
    }

    render() {
        return (
            <div className='chart'>
                <canvas
                    id="myChart"
                    ref={this.chartRef}
                    />
            </div>
        )
    }
};

...