多色圆形进度条答案

【问题标题】：Multicolor circle progress bar多色圆形进度条
【发布时间】：2019-01-16 10:09:23
【问题描述】：

我正在使用react-circular-progressbar 创建一个百分比值的圆形进度条反应。现在我需要传递两个以上的百分比值。请告诉我如何实现这一点，或者让我知道我是否可以使用其他模块或其他任何东西。

【问题讨论】：

【解决方案1】：

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

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>

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

【讨论】：