Reactjs 多色圆形进度条

我正在使用创建循环进度条，该进度条在react中具有一个百分比值。现在我需要传递两个以上的百分比值。 请建议我如何实现这一点，或者让我知道我是否可以使用其他模块或任何东西

---

您可以使用Recharts库实现您想要的功能。但是您必须使用Recharts提供的组件开发（不是从头开始）一个稍微定制的组件。这个库非常灵活，但比您现在使用的库要复杂一些

我发展了一些类似于你的问题

let chartData = [{ value: parseInt(final_val), color: 'red' }, { value: ((parseInt(remain_val) > 0) ? parseInt(remain_val) : 0), color: 'grey' }]

<PieChart >
<Pie data={chartData} cx="50%" cy="85%" startAngle={180} endAngle={0} innerRadius='105%' outerRadius='140%' fill="red" label >
{
     chartData.map((entry, index) => <Cell key={index} fill={index === 1 ? '#ddd' : 'red'} />)
}
</Pie>
<text style={{ fontSize: '5vw', fontWeight: '800' }} x="50%" y="70%" dy={8} textAnchor="middle" fill="#000">{final_val}</text>
<g> <line x1="27%" y1="76%" x2="73%" y2="76%" style={{ stroke: 'rgb(255,0,0)', strokeWidth: '2' }} />
</g>
<text style={{ fontSize: '3vw', fontWeight: '600' }} x="50%" y="90%" dy={8} textAnchor="middle" fill="#8884d8">{target_val}</text>
</PieChart>

let chartData=[{value:parseInt（final_val），color:'red'}，{value:（（parseInt（remaine_val）>0）？parseInt（remaine_val）：0，color:'grey'}]
{
chartData.map（（条目，索引）=>）
}
{final_val}
{target_val}

上面的代码创建如下内容