javascript - 如何创建 react-chartjs 插件

Question

我为饼图聊天创建了一个插件。该插件的想法是将数据集中在甜甜圈的中间。

const [data1, setData1] = useState()
const [plugins, setPlugins] = useState([])
const dashboardInfo = useSelector((state) => state.dashboardInfo.data);
useEffect(() => {
    const xxxNE = dashboardInfo.division ? Object.values(dashboardInfo.division[0]) : [''];
    const sikPercentage = xxxNE[1] ? xxxNE[1][0].percentage : ''
    const trPercentage = xxxNE[1] ? xxxNE[1][1].percentage : ''
   
    setData1({
        labels: [ // legend labels
            "SIK: " + sikPercentage + '%',
            "TR: " + trPercentage + '%'
        ],
        datasets: [{
            label: '# of Votes',
            data: [2, 3],
            backgroundColor: [
                '#fb6340',
                'rgba(54, 162, 235, 0.5)',
            ],
            borderColor: ['#fff', '#fff'],
            borderWidth: 2,
            cutout: '90%',

        }]
    })

    setPlugins([{
        beforeDraw: function (chart) {
            var width = chart.width,
                height = chart.height,
                ctx = chart.ctx;
            ctx.restore();
            var fontSize = (height / 180).toFixed(2);
            ctx.font = fontSize + "em Montserrat";
            ctx.textBaseline = "top";
            ctx.textAlign = 'center';
            ctx.fillText(40 + ' / ' + sikPercentage  + '%', width / 2, height / 2);
            ctx.save();
        }
    }])

}, [dashboardInfoData, setData1, setPlugins])


return (
          <Doughnut
            data={data1}
            plugins={plugins}
            options={{
                legend: false,
                legendCallback: function (circleData) {
                    var ul = document.createElement('ul');
                    var borderColor = circleData.datasets[0].borderColor;
                    var dataValue = circleData.datasets[0].data;
                    circleData.data.labels.forEach(function (label, index) {
                        ul.innerHTML += `
               <li>
                 <span style="background-color: ${borderColor[index]}
                   ";></span> ${label} ${dataValue[index]}
               </li>
             `;
                    });
                    return ul.outerHTML;
                },
            }
            }
        />

问题是插件没有显示数据。知道我缺少什么吗？

谢谢

标签： javascriptreactjschart.jsreact-chartjsreact-chartjs-2