نمودار دونات با visx در React

ek3nk4r 1 هفته پیش

0 1 خواندن این مطلب 6 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

Summarize this content to 400 words in Persian Lang
سلام، در این راهنما، نحوه ایجاد نمودار Progress Donut با استفاده از visx را یاد خواهیم گرفت. نمودار دونات گونه‌ای از نمودار دایره‌ای است که دارای یک سوراخ مرکزی است که شبیه یک دونات است.

درک ریاضی

برای پیاده سازی موثر ویژگی های نمودار ما، درک اصول ریاضی پشت آن ضروری است. نمودار دایره ای با رادیان 360 درجه یا 2 * پی است. در اینجا نحوه تعیین زوایای هر بخش پیشرفت آورده شده است:

2 * PI / (number of progress data points)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

زاویه شروع برای هر بخش پیشرفت با ضرب شاخص در 2 * Pi تقسیم بر تعداد کل نقاط داده پیشرفت به دست می آید:

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

زاویه پایان یک بخش پیشرفت با افزودن درصد پیشرفت به شاخص و سپس ضرب در 2 * Pi تقسیم بر تعداد کل نقاط داده پیشرفت محاسبه می شود:

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای نوار مسیر که نشان دهنده پیشرفت باقی مانده است، زاویه شروع همان زاویه پایان بخش پیشرفت است، در حالی که زاویه پایان، زاویه شروع بخش پیشرفت به اضافه کل پیشرفت آن بخش است.

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نوار آهنگ endAngle:

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کد نمودار دونات

اولین گام در توسعه نمودار، سازماندهی داده های لازم است. در data.js در فایل، نمادهایی را برای داده های پیشرفت، میزان پیشرفت و رنگ های مربوطه تعریف خواهید کرد.

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بعد، اجازه دهید کامپوننت نمودار Donut را پیاده سازی کنیم. از محاسبات ریاضی شرح داده شده در بالا برای تولید پویا زوایای هر بخش پیشرفت و نوار مسیر همراه استفاده کنید.

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

لطفاً در صورت نیاز به توضیح بیشتر یا کمک برای ساختن مؤلفه نمودار دونات، در تماس نباشید. با تشکر از شما برای خواندن این مقاله نسخه ی نمایشی زنده اینجا است.

سلام، در این راهنما، نحوه ایجاد نمودار Progress Donut با استفاده از visx را یاد خواهیم گرفت. نمودار دونات گونه‌ای از نمودار دایره‌ای است که دارای یک سوراخ مرکزی است که شبیه یک دونات است.

فهرست مطالب

درک ریاضی

2 * PI / (number of progress data points)

زاویه شروع برای هر بخش پیشرفت با ضرب شاخص در 2 * Pi تقسیم بر تعداد کل نقاط داده پیشرفت به دست می آید:

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

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

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

نوار آهنگ endAngle:

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

کد نمودار دونات

اولین گام در توسعه نمودار، سازماندهی داده های لازم است. در data.js در فایل، نمادهایی را برای داده های پیشرفت، میزان پیشرفت و رنگ های مربوطه تعریف خواهید کرد.

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

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