Carta Donat Dengan visx dalam React

Helo, Dalam panduan ini, kita akan belajar cara mencipta carta Progress Donut menggunakan visx. Carta Donut ialah varian carta pai yang menampilkan lubang tengah, menyerupai donat.

Memahami Matematik

Untuk melaksanakan ciri carta kami dengan berkesan, adalah penting untuk memahami prinsip matematik di belakangnya. Carta ialah bulatan dengan 360 darjah atau 2 * Pi radian. Begini cara kami menentukan sudut untuk setiap segmen kemajuan :

2 * PI / (number of progress data points)

Sudut permulaan untuk setiap segmen kemajuan diperoleh dengan mendarab indeks dengan 2 * Pi dibahagikan dengan jumlah titik data kemajuan :

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

Sudut penghujung segmen kemajuan dikira dengan menambah peratusan kemajuan pada indeks dan kemudian didarab dengan 2 * Pi dibahagikan dengan jumlah titik data kemajuan :

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

Untuk bar trek yang mewakili baki kemajuan, sudut mula adalah sama dengan sudut akhir segmen kemajuan, manakala sudut akhir ialah sudut permulaan segmen kemajuan ditambah jumlah kemajuan segmen itu.

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

bar trek hujungSudut :

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

Kod Carta Donut

Langkah pertama dalam membangunkan carta ialah menyusun data yang diperlukan. Dalam fail data.js, anda akan mentakrifkan simbol untuk data kemajuan, jumlah kemajuan dan warna yang sepadan.

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

Seterusnya, mari kita laksanakan Komponen Carta Donut. Gunakan pengiraan matematik yang diterangkan di atas untuk menjana secara dinamik setiap sudut segmen kemajuan dan bar trek yang disertakan.

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

Sila jangan teragak-agak untuk menghubungi jika anda memerlukan penjelasan lanjut atau bantuan dengan membina Komponen Carta Donut. Terima kasih kerana membaca artikel ini demo langsung ada di sini.

Atas ialah kandungan terperinci Carta Donat Dengan visx dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!