Donut-Diagramm mit Visx in React

Hallo, in dieser Anleitung erfahren wir, wie man mit Visx ein Fortschritts-Donut-Diagramm erstellt. Ein Donut-Diagramm ist eine Variante eines Kreisdiagramms mit einem zentralen Loch, das einem Donut ähnelt.

Die Mathematik verstehen

Um die Funktionen unseres Diagramms effektiv umzusetzen, ist es wichtig, die dahinter stehenden mathematischen Prinzipien zu verstehen. Das Diagramm ist ein Kreis mit 360 Grad oder 2 * Pi im Bogenmaß. So bestimmen wir die Winkel für jedes Fortschrittssegment:

2 * PI / (number of progress data points)

Der Startwinkel für jedes Fortschrittssegment wird durch Multiplikation des Index mit 2 * Pi dividiert durch die Gesamtzahl der Fortschrittsdatenpunkte abgeleitet:

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

Der Endwinkel eines Fortschrittssegments wird berechnet, indem der Fortschrittsprozentsatz zum Index addiert und dann mit 2 * Pi dividiert durch die Gesamtzahl der Fortschrittsdatenpunkte multipliziert wird:

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

Für die Trackleiste, die den verbleibenden Fortschritt darstellt, ist der Startwinkel derselbe wie der Endwinkel des Fortschrittssegments, während der Endwinkel der Startwinkel des Fortschrittssegments plus dem Gesamtfortschritt dieses Segments ist.

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

der Spurstangen-Endwinkel:

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

Donut-Diagrammcode

Der erste Schritt bei der Entwicklung des Diagramms besteht darin, die erforderlichen Daten zu organisieren. In der Datei data.js definieren Sie Symbole für Fortschrittsdaten, den Fortschrittsbetrag und entsprechende Farben.

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

Als nächstes implementieren wir die Donut-Diagrammkomponente. Nutzen Sie die oben beschriebenen mathematischen Berechnungen, um die Winkel jedes Fortschrittssegments und die dazugehörige Spurleiste dynamisch zu generieren.

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

Bitte zögern Sie nicht, uns zu kontaktieren, wenn Sie weitere Erläuterungen oder Hilfe beim Aufbau der Donut-Diagramm-Komponente benötigen. Vielen Dank, dass Sie diesen Artikel gelesen haben. Die Live-Demo ist hier.

Das obige ist der detaillierte Inhalt vonDonut-Diagramm mit Visx in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!