css - 使用 Recharts 实现循环进度条
问题描述
我正在为 PieCharts 使用recharts库。
能够移除填充角但想要移除单元分隔符(paddingAngle={0}
白色)。
代码:
const data = [
{ id: "1", name: "L1", value: 75 },
{ id: "2", name: "L2", value: 25 }
];
<PieChart width={50} height={50}>
<text
x={25}
y={25}
textAnchor="middle"
dominantBaseline="middle"
>
25
</text>
<Pie
data={data}
dataKey="value"
innerRadius="80%"
outerRadius="100%"
fill="#82ca9d"
startAngle={90}
endAngle={-270}
paddingAngle={0}
cornerRadius={5}
>
<Cell
key="test"
fill="#CCC"
/>
</Pie>
</PieChart>
当前看起来像:
想这样实现:
如何做到这一点?
谢谢
解决方案
终于得到了解决方案。建议不要使用 解决方法,而是PieChart
建议使用RadialBarChart
解决方案:
const data = [
{ name: 'L1', value: 25 }
];
const circleSize = 30;
<RadialBarChart
width={circleSize}
height={circleSize}
cx={circleSize / 2}
cy={circleSize / 2}
innerRadius={12}
outerRadius={18}
barSize={2}
data={data}
startAngle={90}
endAngle={-270}
>
<PolarAngleAxis
type="number"
domain={[0, 100]}
angleAxisId={0}
tick={false}
/>
<RadialBar
background
clockWise
dataKey="value"
cornerRadius={circleSize / 2}
fill="#82ca9d"
/>
<text
x={circleSize / 2}
y={circleSize / 2}
textAnchor="middle"
dominantBaseline="middle"
className="progress-label"
>
25
</text>
</RadialBarChart>
推荐阅读
- scala - 参数杂质给定无效值 gini
- android - 尝试使用复选框中的 ArrayList 显示在另一个活动的列表视图上时,Android Studio 应用程序崩溃
- xamarin - Xamarin.Forms - 发布 apk 未安装
- django - 使用 Django 自定义用户模型和序列化程序更改密码 API
- c - 如何跨多个翻译单元共享不透明类型?
- javascript - 试图将 VAR 设置为 DIV 的名称
- php - 在 WITH 中无需访问器即可获得 eloquent
- python - 通过训练多个文件来创建训练数据
- java - selenium Webdriver中具有两层标题或多层标题的表
- excel - excel/VBA:检测 IE 内文字体粗细