首页 > web前端 > js教程 > 正文

Donut Chart With visx in React

Patricia Arquette
发布: 2024-09-21 18:31:02
原创
324 人浏览过

Donut Chart With visx in React

Hello, In this guide, we will learn how to create a Progress Donut chart using visx. A Donut chart is a variant of a pie chart featuring a central hole, resembling a donut.

Understanding the Math

To effectively implement the features of our chart, it is essential to grasp the mathematical principles behind it. The chart is a circle with 360 degrees or 2 * Pi radians. Here's how we determine the angles for each progress segment :

2 * PI / (number of progress data points)
登录后复制

The starting angle for each progress segment is derived by multiplying the index by 2 * Pi divided by the total number of progress data points :

(index) * 2 * PI / (number of progress data points )
登录后复制

The ending angle of a progress segment is calculated by adding the progress percentage to the index and then multiplying by 2 * Pi divided by the total number of progress data points :

(index + (progress / 100)) * 2 * PI / (number of progress data points  )
登录后复制
登录后复制

For the track bar representing remaining progress, the start angle is the same as the end angle of the progress segment, while the end angle is the start angle of the progress segment plus the total progress of that segment.

(index + (progress / 100)) * 2 * PI / (number of progress data points  )
登录后复制
登录后复制

the track bar endAngle :

(index + 1) * 2 * PI / (number of progress data points)
登录后复制

Donut Chart Code

The first step in developing the chart is to organize the necessary data. In the data.js file, you will define symbols for progress data, the progress amount, and corresponding colors.

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, },
];

登录后复制

Next, let's implement the Donut Chart Component. Utilize the math calculations described above to dynamically generate each progress segment's angles and accompanying track bar.

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 (
        <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}
                >
                    {({ 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 (
                            <g >
                                {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 (
                                        <>
                                            <g key={`pie-arc-${i}+1`}>
                                                <path
                                                    className={`arc${i}`}
                                                    d={path(firstArc)}
                                                    fill={getBrowserColor(arc.data.symbol)}
                                                />
                                            </g>
                                            <g key={`pie-arc-${i}+2`}>
                                            <path
                                                className={`arc${i}`}
                                                d={path(second)}
                                                fill={'#E4E4E4'}
                                            />
                                        </g>

                                        </>
                                    )
                                })}
                            </g>
                        )
                    }}
                </Pie>
                <Text className="whitespace-wrap" textAnchor="middle" verticalAnchor={'middle'} fill="black" scaleToFit fontFamily="sans-serif" >
                    {title}
                </Text>
            </Group>

        </svg>)
}

登录后复制

Please don't hesitate to reach out if you require further clarification or assistance with constructing the Donut Chart Component. Thank you for reading this article the live demo is here.

以上是Donut Chart With visx in React的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板