您好，在本指南中，我们将学习如何使用 visx 创建进度圆环图。甜甜圈图是饼图的变体，具有中心孔，类似于甜甜圈。
理解数学
为了有效地实现我们图表的功能，必须掌握其背后的数学原理。该图表是一个 360 度或 2 * pi 弧度的圆。以下是我们确定每个进度段的角度的方法：
2 * pi / (number of progress data points)
每个进度段的起始角度是通过将索引乘以 2 * pi 除以进度数据点总数得出的：
(index) * 2 * pi / (number of progress data points )
进度段的结束角度是通过将进度百分比添加到索引，然后乘以 2 * pi 除以进度数据点总数来计算的：
(index + (progress / 100)) * 2 * pi / (number of progress data points )
对于代表剩余进度的轨迹栏，起始角度与进度段的结束角度相同，结束角度为进度段的起始角度加上该段总进度。
(index + (progress / 100)) * 2 * pi / (number of progress data points )
轨迹栏结束角度：
(index + 1) * 2 * pi / (number of progress data points)
圆环图代码
开发图表的第一步是组织必要的数据。在 data.js 文件中，您将定义进度数据的符号、进度金额以及相应的颜色。
export const coins = [ { symbol: "r", color: "#121212", progress: 30, }, { symbol: "l", color: "#91235d", progress: 37, }, { symbol: "s", color: "#5ef13f", progress: 90, }, { symbol: "w", color: "#643dfe", progress: 50, }, { symbol: "d", color: "#ef0de6", progress: 45, },];
接下来，让我们实现圆环图组件。利用上述数学计算动态生成每个进度段的角度和随附的轨迹栏。
import { Pie } from "@visx/shape";import { Group } from "@visx/group";import { scaleOrdinal } from "@visx/scale";import { Text } from "@visx/text";const margin = { top: 10, right: 10, bottom: 10, left: 10 };const thickness = 25;export default function Donut({ width, height, data, title,}: { width: number; height: number; data: { symbol: string; progress: number; color: string }[]; title: string;}) { const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const radius = Math.min(innerWidth, innerHeight) / 2; const centerY = innerHeight / 2; const centerX = innerWidth / 2; const getBrowserColor = scaleOrdinal({ domain: data.map((d) => d.symbol), range: data.map(item => item.color), }); return ( d.progress / 100} outerRadius={radius} innerRadius={radius - thickness + 21} > {({ arcs, path }) => { arcs = arcs.map((item, index) => { return ({ ...item, startAngle: (index) * (Math.PI * 2 / data.length), endAngle: (((index + (item.data.progress / 100)) * (Math.PI * 2 / data.length))), }) }) return ( {arcs.map((arc, i) => { const firstArc = { ...arc, startAngle: arc.startAngle, endAngle: arc.endAngle } const second = { ...arc, startAngle: arc.endAngle, endAngle: arc.startAngle + Math.PI * 2 /data.length} return ( ) }} {title} )}
如果您在构建圆环图组件方面需要进一步说明或帮助，请随时与我们联系。感谢您阅读本文，现场演示就在这里。
以上就是React 中使用 visx 的圆环图的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491658.html
微信扫一扫 
支付宝扫一扫 
