Graphique en beignet avec visx dans React

Bonjour, Dans ce guide, nous allons apprendre à créer un graphique Progress Donut à l'aide de visx. Un diagramme en forme de beignet est une variante d'un diagramme circulaire comportant un trou central, ressemblant à un beignet.

Comprendre les mathématiques

Pour mettre en œuvre efficacement les fonctionnalités de notre graphique, il est essentiel de comprendre les principes mathématiques qui le sous-tendent. Le graphique est un cercle de 360 ​​degrés ou 2 * Pi radians. Voici comment nous déterminons les angles pour chaque segment de progression :

2 * PI / (number of progress data points)

L'angle de départ pour chaque segment de progression est obtenu en multipliant l'indice par 2 * Pi divisé par le nombre total de points de données de progression :

(index) * 2 * PI / (number of progress data points )

L'angle final d'un segment de progression est calculé en ajoutant le pourcentage de progression à l'index puis en multipliant par 2 * Pi divisé par le nombre total de points de données de progression :

(index + (progress / 100)) * 2 * PI / (number of progress data points  )

Pour la barre de suivi représentant la progression restante, l'angle de départ est le même que l'angle de fin du segment de progression, tandis que l'angle de fin est l'angle de départ du segment de progression plus la progression totale de ce segment.

(index + (progress / 100)) * 2 * PI / (number of progress data points  )

l'angle de fin de la barre de suivi :

(index + 1) * 2 * PI / (number of progress data points)

Code du graphique en beignet

La première étape dans l'élaboration du graphique consiste à organiser les données nécessaires. Dans le fichier data.js, vous définirez des symboles pour les données de progression, le montant de la progression et les couleurs correspondantes.

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

Ensuite, implémentons le composant Donut Chart. Utilisez les calculs mathématiques décrits ci-dessus pour générer dynamiquement les angles de chaque segment de progression et la barre de suivi qui l'accompagne.

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>)
}

N'hésitez pas à nous contacter si vous avez besoin de précisions supplémentaires ou d'aide pour la construction du composant Donut Chart. Merci d'avoir lu cet article, la démo en direct est ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!