主页 / coding / 问题 / 76924038
Accepted
Richardson
Asked: 2023-08-18 01:57:13 +0800 CST

如何使用 Mui CircularProgress 创建一个可以处理 3 个不同值的数据可视化的循环进度

  • 772

我有以下 mui v5 CircularProgress 代码，如何让它同时显示 3 个不同的值？

export const StatusCircle: React.FC<Props> = ({ a, b, c }) => {
 
return (
<StyledBox>
<StyledCircularProgress size={50} thickness={4} variant='determinate' sx={{ color: 'red' }} value={a} />
<StyledCircularProgress size={50} thickness={4} variant='determinate' sx={{ color: 'green' }} value={b} />
<StyledCircularProgress size={50} thickness={4} variant='determinate' sx={{ color: 'yellow }} value={c} />
</StyledBox>
);
};

material-ui

1 个回答

  1. Best Answer

    首先，将所有三个CircularProgress组件堆叠在一起。要实现此目的，请将每个元素的位置设置为absolute，并将包装器元素的位置设置为relative。

    const StyledBox = styled(Box)({
  position: "relative"
});

const StyledCircularProgress = styled(CircularProgress)({
  position: "absolute"
});

    默认情况下，CircularProgress对其应用旋转，使其从顶部开始。对于第二个和第三个CircularProgress，我们希望它们从第一个结束的地方开始。为此，我们需要修改第二个和第三个CircularProgress组件的旋转。

    此旋转属性直接添加到元素的样式中，而不是其类中。因此，您可以使用内联样式覆盖它。

    要确定下一种颜色应从哪里开始，请计算着色进度的百分比。例如，假设第一种颜色覆盖了进度的20% 。我们需要将此百分比转换为度数以匹配圆形布局。如果我们将360度视为一个完整的圆，则20%对应于72度。然而，由于默认的旋转，我们需要调整这个值。减去90度作为起点，得到第二种颜色的-18度。

    const firstDeg = (a / 100) * 360 - 90;

    对于第三种颜色，我们应用类似的技术，但这次我们需要添加第一种颜色和第二种颜色的值。这种组合为我们为进程的第三部分着色提供了起点。

    const secondDeg = (((a + b) / 100) * 360).toFixed(2) - 90;

    我们在 JavaScript 中遇到了分数到小数计算的问题，这就是我们使用toFixed(2).

    编辑 mui-circular-progress-3-colors

    • 1

相关问题