使用react-chartjs-2同时呈现多个图表

Question

我绘制的条形图没有任何错误。但是当添加甜甜圈图表时它会在控制台中得到这种错误。取消评论甜甜圈图表组件时出现错误。我认为这里的问题是我可能缺少任何的图表js注册的甜甜圈图。

react-dom.development.js:22831 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
at setDatasets (utils.ts:57:1)
at cloneData (utils.ts:94:1)
at renderChart (chart.tsx:43:1)
at chart.tsx:97:1
at commitHookEffectListMount (react-dom.development.js:23139:1)
at commitPassiveMountOnFiber (react-dom.development.js:24917:1)
at commitPassiveMountEffects_complete (react-dom.development.js:24880:1)
at commitPassiveMountEffects_begin (react-dom.development.js:24869:1)
at commitPassiveMountEffects (react-dom.development.js:24856:1)
at flushPassiveEffectsImpl (react-dom.development.js:27029:1)

这是我的代码。app.js

import {
Chart as ChartJs,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from  'chart.js'
import { Bar, Doughnut } from 'react-chartjs-2';
import {useState, useEffect} from 'react'
import { individual_dataset } from './data';
import {
Container,
NavBar,
ConfidenceContainer,
OutLine,
DesigInput,
Box,
Option,
ChartsContainer,
} from './style'
ChartJs.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
)

function App() {
const [confidenceData, setConfidenceData] = useState({
datasets: []
})
const [ chartOptions, setChartOptions] = useState({});
const [gaughData, setGaughData] = useState({
dataset:[]
})
const [gaughChartOptions, setGaughChartOptions] = useState({})
const [selected, setSelected] = useState({});
const [showList, setShowList] = useState(false);
const handleItemChange=(item)=>{
setSelected(item)
setShowList(false)
}
useEffect(()=>{
if(selected?.name){
setConfidenceData({
labels: ['confidence', 'active listening', 'total'],
datasets: [
{
label: 'Average',
data: [58.05, 67.125, 125.5],
borderColor: "rgb(53,162, 235)",
backgroundColor: "#9EA1D4"
},
{
label: 'Individual Score',
data: [selected.total_score_confidence, selected.total_score_active_listening, selected.total_score_overall],
borderColor: "rgb(53,162, 235)",
backgroundColor: "#FD8A8A"
},

]
})
setGaughData({
labels:['Confidence', 'left over', 'hi'],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}],
})
}

setGaughChartOptions({
})
setChartOptions({
responsive: true,
plugins: {
scales: {
y:{
min: 200,
max: 200,
stepSize: 40, 
}
},
legend:{
position: "bottom",
labels:{
pointStyle: 'circle'
}
},
title:{
display: true,
text: `Performance of ${selected?.name}`,
}
}
})
},[selected])

return (
<Container>
<NavBar>
<h2> {selected?.name ? `${selected.name}'s Performance` : "Individual Performance"}</h2>
<OutLine>
<DesigInput onClick={()=>setShowList(!showList)}>{selected?.name?selected.name: "Select Person"}</DesigInput>
{ showList && <Box>
<Option onClick={()=>handleItemChange()}>NONE</Option>
{individual_dataset.map((item)=>{
return <Option key={item.id} onClick={()=>handleItemChange(item)} >{item.name}</Option>;
})}
</Box>}
</OutLine>
</NavBar>
<ChartsContainer>
{ selected?.name && <ConfidenceContainer key={'confidence'}><Bar key={'confidence'} options={chartOptions}  data={confidenceData} /></ConfidenceContainer>}
{selected?.name && <Doughnut options={gaughChartOptions} data={gaughData} />}
</ChartsContainer>
</Container>
);
}
export default App;

示例data.js

data = [
{
id:"1",
name:"Shivam",
total_score_confidence:"100",
total_score_active_listening:"100",
total_score_overall:"200"
},
{
id:"2",
name:"Utkarsh",
total_score_confidence:"57",
total_score_active_listening:"85",
total_score_overall:"142"
},
]

我需要渲染甜甜圈图和条形图。

Answer 1

我可以看到的是，您正在从chart.js导入BarElement，这就是为什么您的条形图工作正常，但您也应该为甜甜圈图导入ArcElement。别忘了把'ArcElement'也添加到CharJS.register列表中。

Answer 2

我不知道你是否解决了你的问题，但我面临着同样的问题，当试图呈现不同类型的图表(线，条，甜甜圈…)在同一页面，我找到了解决方案。如下所示导入并注册，然后你应该不会再得到错误:

import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
BarElement,
ArcElement,
Tooltip,
Legend,
registerables as registerablesJS
} from 'chart.js';
import { Chart } from 'react-chartjs-2';
ChartJS.register(...registerablesJS);
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
BarElement,
ArcElement,
Tooltip,
Legend,
);