reactjs - 在 React 中创建圆环图

Question

我在我的反应项目中创建了一个示例甜甜圈。现在我要做的是在图表的中心添加动态内容。我在互联网和 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',
    height: '150vh',
  },
}));

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

  const data = {
    datasets: [
      {
        data: [6, 7, 8, 5, 9, 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;