chartjs用甜甜圈显示统计数据，但没有图片的图例和信息

Question

我正在使用chartjs来显示一些信息。到目前为止，它是有效的，但如果我悬停在甜甜圈的一个pice上，我就不会看到这个pice的信息。但这个传说并没有出现。我不知道问题出在哪里…

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';