无法通过始终返回零的 props 计算 douhnut Chart.js 值

Question

const DoughnutChart: React.FC<DoughnutChartProps> = (props) => {
    // eslint-disable-next-line react/prop-types
    const { chartDetails } = props;
    const activeCount = chartDetails?.activeCount || 0;
  const deactiveCount = chartDetails?.deactiveCount || 0;
  const otherStatuses = chartDetails?.otherStatuses || 0;

  const sum = activeCount + deactiveCount + otherStatuses;

    const data: ChartData<'doughnut'> = {
        labels: ['Active', 'Deactivated', 'Other statuses'],
        datasets: [
            {
                data: [chartDetails?.activeCount, chartDetails?.deactiveCount, chartDetails?.otherStatuses],
                backgroundColor: ['rgba(119, 1, 65, 1)', 'rgba(167, 0, 90, 1)', 'rgba(230, 230, 230, 1)'],
                borderColor: ['rgba(119, 1, 65, 1)', 'rgba(167, 0, 90, 1)', 'rgba(230, 230, 230, 1)'],
                borderWidth: [1],
            },
        ],
    };
    
    const centerTextPlugin = {
        id: 'doughnutLabel',
        afterDatasetsDraw: (chart: any) => {
            const { ctx } = chart;
            const centerX = chart.getDatasetMeta(0).data[0].x;
            const centerY = chart.getDatasetMeta(0).data[0].y;
     
            ctx.save();
            ctx.font = ' bold 48px  sans-serif';
            ctx.fillStyle = 'black';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(sum.toString(), centerX, centerY - 10);
            ctx.font = '16px  sans-serif';
            ctx.fillText('Total devices', centerX, centerY + 25);
            ctx.restore();
        },
    };
    Chart.register(centerTextPlugin);
    
    const options: MyChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '80%',
        plugins: {
            legend: {
                display: false,
            },
        },
    };
 
    
 
    return (
        <div className="doughnut-chart">
            <Doughnut data={data} options={options} height={200} width={200} />
        </div>
    );
};
 
export default DoughnutChart;

我期待道具值的总和，但总是返回零

Answer 1

这只是一个猜测，但我认为问题可能是您正在使用 ||运算符而不是 ??运算符，因此它返回一个布尔值而不是数字。