图表显示的是甜甜圈的数据，但没有得到图片的传说和信息。

Question

我用图表来显示一些信息。它的工作到目前为止，但如果我悬停在一个饼的甜甜圈，我没有得到显示的信息，这个饼。而传说却没有被展示出来。我不知道有什么问题..。

import {UserGameDTO} from "../service/model";
import {Doughnut} from "react-chartjs-2"
import {Chart, ArcElement} from "chart.js"
Chart.register(ArcElement);

interface gameDoughnutProps{
    Game: UserGameDTO
}

export function GameDoughnut(props: gameDoughnutProps){


    const options = {
        responsive: true,
        plugins: {
            legend: {
                position: 'top' as const,
            },
            title: {
                display: true,
                text: "test",
            },
        },
    }
    
    const doughnutData = {
        labels: [
            'Red',
            'Blue',
            'Yellow'
        ],
        datasets: [{
            label: 'Spent money',
            data: [props.Game.spentMoneyGame, props.Game.spentMoneyCoins, props.Game.spentMoneyGamePass],
            borderColor: "black",
            backgroundColor: [
                'rgb(243,121,147)',
                'rgb(97,172,227)',
                'rgb(234,198,115)'
            ],
            hoverOffset: -10
        }],
    };

    return(
        <Doughnut options={options} data={doughnutData}/>
    )
}
``

Answer 1

如果使用树搜索，则需要导入和注册所使用的所有内容，因此在您的示例中，还需要导入图例和工具提示并注册它们。

import {Chart, Legend, Tooltip} from 'chart.js';

Chart.register(Legend, Tooltip);

或者，您可以让chart.js为您处理一切，并使用此导入

import Chart from 'chart.js/auto';