Rumah  >  Artikel  >  hujung hadapan web  >  Carta Donat Dengan visx dalam React

Carta Donat Dengan visx dalam React

Patricia Arquette
Patricia Arquetteasal
2024-09-21 18:31:02324semak imbas

Donut Chart With visx in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn