PieChart
PieChartは、複数のデータを比較するためのパイチャートを描画するコンポーネントです。
インポート
pnpm add @yamada-ui/charts
@yamada-ui/chartsは、@yamada-ui/reactに含まれていないため、別途インストールする必要があります。
import { PieChart } from "@yamada-ui/charts"
使い方
PieChartは、内部的にRechartsを使用しています。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <PieChart data={mewtwo} />
サイズを変更する
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return ( <VStack> <PieChart data={mewtwo} size="sm" /> <PieChart data={mewtwo} size="md" /> <PieChart data={mewtwo} size="lg" /> </VStack> )
凡例を表示する
凡例を表示する場合は、withLegendをtrueに設定します。また、凡例の位置を変更する場合は、legendProps.verticalAlignに"bottom"などを設定します。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return ( <VStack> <PieChart data={mewtwo} withLegend /> <PieChart data={mewtwo} withLegend legendProps={{ verticalAlign: "bottom", mb: "0", mt: "4" }} /> </VStack> )
間隔を調整する
間隔を調整する場合は、paddingAngleに数値を設定します。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <PieChart data={mewtwo} paddingAngle={15} />
開始、終了の角度を調整する
開始の角度を調整する場合はstartAngleに、終了の角度を調整する場合はendAngleに角度を設定します。
3時の方向を0度として反時計回りに進みます。時計回りにしたい場合は、マイナスの値を設定してください。
デフォルト値は12時から時計回りにするため、startAngleに90、endAngleに-270を設定しています。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <PieChart data={mewtwo} startAngle={90} endAngle={225} />
ラベルを表示する
ラベルを表示する場合は、withLabelsをtrueに設定します。
また、ラベルまでのガイドを表示する場合はwithLabelLinesをtrueに設定します。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <PieChart data={mewtwo} withLabels withLabelLines />
ラベルの表示位置を調整する
ラベルを表示位置を調整する場合は、labelOffsetに数値を設定します。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <PieChart data={mewtwo} withLabels withLabelLines labelOffset={35} />
ラベルを割合にする
ラベルの表示を割合にする場合は、isPercentをtrueに設定します。デフォルトは、falseです。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <PieChart data={mewtwo} withLabels isPercent />
ツールチップに表示するデータを切り替える
ツールチップに表示するデータを切り替える場合は、tooltipDataSourceにallまたはsegmentを設定します。デフォルトは、allです。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <PieChart data={mewtwo} tooltipDataSource="segment" />
ツールチップを非表示にする
ツールチップを非表示にする場合は、withTooltipをfalseに設定します。デフォルトは、trueです。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <PieChart data={mewtwo} withTooltip={false} />
フォーマットする
ツールチップの値をフォーマットする場合は、valueFormatterを使います。
ラベルの値をフォーマットする場合は、labelFormatterを使います。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return ( <VStack> <PieChart data={mewtwo} valueFormatter={(value) => `${value}P`} /> <PieChart data={mewtwo} withLabels labelFormatter={(value) => `${value}P`} /> </VStack> )
透明度を調整する
透明度を調整する場合は、fillOpacityに数値または数値の配列を設定します。
編集可能な例
const mewtwo: CellProps[] = useMemo( () => [ { name: "HP", value: 106, color: "green.500", }, { name: "こうげき", value: 110, color: "red.500", }, { name: "ぼうぎょ", value: 90, color: "blue.500", }, { name: "とくこう", value: 154, color: "purple.500", }, { name: "とくぼう", value: 90, color: "orange.500", }, { name: "すばやさ", value: 130, color: "cyan.500", }, ], [], ) return <PieChart data={mewtwo} fillOpacity={[0.8, 0.7]} />
GitHubでこのページを編集する