多色圆圈进度条

Question

我正在使用react-circular-progressbar创建一个带有1个百分比值的循环进度条。现在，我需要传递两个以上的百分比值。 请告诉我如何实现此目标，或者告诉我是否可以使用其他模块或其他任何内容。

Answer 1

您可以使用图表库来实现所需的功能。但是您必须使用图表提供的组件来开发（而不是从头开始）一些定制的组件。该库非常灵活，但是会比您现在使用的库复杂一些。

http://recharts.org/en-US/examples/CustomActiveShapePieChart

我提出了类似你的要求，

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>

上面的代码创建类似这样的东西