React の visx を使用したドーナツ チャート

こんにちは。このガイドでは、visx を使用して進行状況ドーナツ チャートを作成する方法を学習します。ドーナツ グラフは円グラフの一種で、ドーナツに似た中央の穴が特徴です。

数学を理解する

チャートの機能を効果的に実装するには、その背後にある数学的原理を理解することが不可欠です。チャートは 360 度または 2 * Pi ラジアンの円です。各進行セグメントの角度を決定する方法は次のとおりです:

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  )

トラックバーの終了角度:

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

ドーナツ チャート コンポーネントの構築に関してさらに詳しい説明や支援が必要な場合は、お気軽にお問い合わせください。この記事をお読みいただきありがとうございます。ライブデモはこちらです。

以上がReact の visx を使用したドーナツ チャートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。