React 中使用 visx 的圆环图

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签圆环

您好，在本指南中，我们将学习如何使用 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) =&gt; d.symbol),        range: data.map(item =&gt; item.color),    });    return (        <svg width="{width}" height="{height}"><group top="{centerY" margin.top left="{centerX" margin.left><pie data="{data}" pievalue="{(d)"> d.progress / 100}                    outerRadius={radius}                    innerRadius={radius - thickness + 21}                &gt;                    {({ arcs, path }) =&gt; {                        arcs = arcs.map((item, index) =&gt; {                            return ({                            ...item,                                 startAngle: (index) * (Math.PI * 2 / data.length),                                endAngle: (((index + (item.data.progress / 100)) * (Math.PI * 2 / data.length))),                            })                        })                        return (                            <g>                                {arcs.map((arc, i) =&gt; {                                    const firstArc = { ...arc, startAngle: arc.startAngle, endAngle: arc.endAngle }                                    const second = { ...arc, startAngle: arc.endAngle, endAngle: arc.startAngle + Math.PI * 2 /data.length}                                    return (                                                                                    <g key="{`pie-arc-${i}+1`}"><path classname="{`arc${i}`}" d="{path(firstArc)}" fill="{getBrowserColor(arc.data.symbol)}"></path></g><g key="{`pie-arc-${i}+2`}"><path classname="{`arc${i}`}" d="{path(second)}" fill="{'#E4E4E4'}"></path></g>&gt;                                    )                                })}                            </g>                        )                    }}                </pie><text classname="whitespace-wrap" textanchor="middle" verticalanchor="{'middle'}" fill="black" scaletofit fontfamily="sans-serif">                    {title}                </text></group></svg>)}

如果您在构建圆环图组件方面需要进一步说明或帮助，请随时与我们联系。感谢您阅读本文，现场演示就在这里。

文章推荐

React 中使用 visx 的圆环图

理解数学

圆环图代码

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？