我正在使用chartjs来显示一些信息。到目前为止它还能用,但是如果我把鼠标悬停在一个甜甜圈上,我就不会显示这个图片的信息。而且图例也不会显示。我不知道问题出在哪里...
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}/>
)
}
``
1条答案
按热度按时间iq0todco1#
如果您正在使用treeshaking,则需要导入并注册您正在使用的所有内容,因此在您的情况下,还需要导入图例和工具提示并注册它们。
或者,您可以让chart.js为您处理所有事务并使用此导入