在React中创建甜甜圈图

如何解决在React中创建甜甜圈图

我在我的react项目中创建一个示例甜甜圈。现在，我要做的是在图表中心添加动态内容。我在互联网和youtube上进行了搜索，但找不到与此相关的任何文档。如果可以的话，请让我知道一种方法。我的代码如下。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import { Grid } from '@material-ui/core';
import Paper from '@material-ui/core/Paper';
import { Doughnut } from 'react-chartjs-2';

const useStyles = makeStyles(theme => ({
  root: {
    background: '#D1D1D2',width: '100vw',height: '150vh',},chart: {
    width: '100vw',}));

function CurrentIssues() {
  const classes = useStyles();

  const data = {
    datasets: [
      {
        data: [6,7,8,5,9,6,6],],};

  return (
    <div>
      <Paper className={classes.root} variant="outlined" square>
        <Grid container spacing={3}>
          <Grid item xs={6}>
            <Doughnut className={classes.chart} data={data} />
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

export default CurrentIssues;