React ドーナツ チャート

The Ignite UI for React ドーナツ チャートは円チャートと同様、変数の発生を比例的に表示します。ドーナツ型チャートは、複数の変数をコンセントリック リングで表示でき、階層データの可視化を組み込みでサポートします。リングは、異なるデータ項目にバインドすることも、共通のデータ ソースを共有することもできます。

React ドーナツ チャートの例

IgrDoughnutChart コントロールでドーナツ チャートを作成するには、以下の例のように、データをバインドします。

EXAMPLE

DATA

TSX

CSS

export class EnergyGlobalDemandItem {
    public constructor(init: Partial<EnergyGlobalDemandItem>) {
        Object.assign(this, init);
    }

    public value: number;
    public category: string;
    public summary: string;

}
export class EnergyGlobalDemand extends Array<EnergyGlobalDemandItem> {
    public constructor(items: Array<EnergyGlobalDemandItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EnergyGlobalDemandItem(
                {
                    value: 37,
                    category: `Cooling`,
                    summary: `Cooling 37%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 25,
                    category: `Residential`,
                    summary: `Residential 25%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 12,
                    category: `Heating`,
                    summary: `Heating 12%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 11,
                    category: `Lighting`,
                    summary: `Lighting 11%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 15,
                    category: `Other`,
                    summary: `Other 15%`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrItemLegendModule, IgrDoughnutChartModule } from "@infragistics/igniteui-react-charts";
import { IgrItemLegend, IgrDoughnutChart, IgrRingSeries } from "@infragistics/igniteui-react-charts";
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';

const mods: any[] = [
    IgrItemLegendModule,
    IgrDoughnutChartModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private legend: IgrItemLegend
    private legendRef(r: IgrItemLegend) {
        this.legend = r;
        this.setState({});
    }
    private chart: IgrDoughnutChart
    private chartRef(r: IgrDoughnutChart) {
        this.chart = r;
        this.setState({});
    }
    private series: IgrRingSeries

    constructor(props: any) {
        super(props);

        this.legendRef = this.legendRef.bind(this);
        this.chartRef = this.chartRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample">

            <div className="legend-title">
                Global Electricity Demand by Energy Use
            </div>

            <div className="legend">
                <IgrItemLegend
                    ref={this.legendRef}
                    orientation="Horizontal">
                </IgrItemLegend>
            </div>

            <div className="container fill">
                <IgrDoughnutChart
                    ref={this.chartRef}
                    allowSliceExplosion="true">
                    <IgrRingSeries
                        name="series"
                        labelMemberPath="summary"
                        labelsPosition="OutsideEnd"
                        labelExtent="30"
                        valueMemberPath="value"
                        legendLabelMemberPath="category"
                        outlines="white"
                        radiusFactor="0.6"
                        startAngle="30"
                        dataSource={this.energyGlobalDemand}
                        legend={this.legend}>
                    </IgrRingSeries>
                </IgrDoughnutChart>
            </div>
        </div>
        );
    }

    private _energyGlobalDemand: EnergyGlobalDemand = null;
    public get energyGlobalDemand(): EnergyGlobalDemand {
        if (this._energyGlobalDemand == null)
        {
            this._energyGlobalDemand = new EnergyGlobalDemand();
        }
        return this._energyGlobalDemand;
    }

}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
cssコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

React ドーナツ チャートの推奨事項

React ドーナツ チャートはプロジェクトに適していますか?

ドーナツ チャートは小さなデータ セットに適しており、一目で読みやすいです。ドーナツ チャートは、部分から全体への視覚化の 1 つのタイプにすぎません。その他は次のとおりです。

• 円

• 積層型エリア
• 積層型 100% エリア (積層型パーセンテージ エリア)
• 積層型棒
• 積層型 100% 棒 (積層型パーセンテージ棒)
• ツリーマップ
• ウォーターフォール

React ドーナツ チャートには、次のようなデータを分析するためのビューア ツールを提供するインタラクティブ機能が含まれています。

• 凡例
• スライスの分割
• スライスの選択
• チャート アニメーション

ドーナツ チャートのベスト プラクティス:

• 複数のデータ セットを使用して、データを輪に表示します。
• データをすばやく説明するために、ドーナツの穴の中に値やラベルなどの情報を配置します。
• スライスまたはセグメントを、合計値または全体に比例するパーセンテージ値として比較します。
• カテゴリのグループがどのように小さなセグメントに分割されるかを示します。
• データ セグメントの合計が 100% になるようにします。
• パーツのセグメント/スライスでカラー パレットを区別できるようにします。

以下の場合にドーナツ チャートを使用しないでください:

• 時間の経過に伴う変化の比較の場合 - 棒、折れ線、またはエリアチャートを使用します。
• 正確なデータ比較が必要である場合 - 棒、折れ線、またはエリアチャートを使用します。
• 6 つまたは 8 つを超えるセグメント (大量のデータ) がある場合 — データ ストーリーに適している場合は、棒、折れ線、またはエリアチャートを検討してください。
• 棒チャートで、ビューアが値の違いを認識しやすくなります。
• 負のデータがある場合、これはドーナツ チャートで表すことができません。

ドーナツ チャート - スライスの選択

React ドーナツ チャートには、クリック時にスライスを選択する機能があります。任意で、単一のカスタム ビジュアル スタイルを選択済みスライスに適用できます。SliceClick イベントは、ユーザーがスライスをクリックすると発生します。スライス選択を有効にすると、クリック時にスライスの選択を変更できます。次のサンプルは、スライスの選択を有効にし、選択したスライスの色を灰色に設定する方法を示しています。

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDoughnutChartModule } from "@infragistics/igniteui-react-charts";
import { IgrDoughnutChart } from "@infragistics/igniteui-react-charts";
import { IgrItemLegend } from "@infragistics/igniteui-react-charts";
import { IgrItemLegendModule } from "@infragistics/igniteui-react-charts";
import { IgrRingSeriesModule } from "@infragistics/igniteui-react-charts";
import { IgrRingSeries } from "@infragistics/igniteui-react-charts";
import { IgrSliceClickEventArgs } from "@infragistics/igniteui-react-charts";

IgrDoughnutChartModule.register();
IgrRingSeriesModule.register();
IgrItemLegendModule.register();

export default class DoughnutChartSelection extends React.Component<any, any> {

    public data: any[];
    public chart: IgrDoughnutChart;
    public legend: IgrItemLegend;

    constructor(props: any) {
        super(props);

        this.data = [
            { MarketShare: 37, Category: "Cooling", Summary: "Cooling 37%", },
            { MarketShare: 25, Category: "Residential", Summary: "Residential 25%",  },
            { MarketShare: 12, Category: "Heating", Summary: "Heating 12%", },
            { MarketShare: 8, Category: "Lighting", Summary: "Lighting 8%", },
            { MarketShare: 18, Category: "Other", Summary: "Other 18%", }
        ];
        this.state = {
            data: this.data,
            selectedSliceLabel: this.data[0].Category,
            selectedSliceValue: this.data[0].MarketShare + "%"
        };

        this.onChartRef = this.onChartRef.bind(this);
        this.onLegendRef = this.onLegendRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options vertical">
                    <span className="legend-title">Global Electricity Demand by Energy Use</span>
                    <div className="legend">
                        <IgrItemLegend ref={this.onLegendRef} orientation="Horizontal"/>
                    </div>
                </div>

                <div className="container relative">
                    <div className="container-overlay">
                        <IgrDoughnutChart
                            ref={this.onChartRef}
                            width="100%"
                            height="100%"
                            allowSliceSelection="true"
                            innerExtent={0.6}
                            sliceClick={this.onSliceClick}>
                                <IgrRingSeries name="ring1"
                                    dataSource={this.state.data}
                                    labelMemberPath="Summary"
                                    labelsPosition="OutsideEnd"
                                    labelExtent={30}
                                    valueMemberPath="MarketShare"
                                    legendLabelMemberPath="Category"
                                    radiusFactor={0.7}
                                    startAngle={30}
                                    />
                        </IgrDoughnutChart>

                        <div className="overlay-center" style={{ lineHeight: 1.1 }}>
                            <label className="options-label" style={{ fontSize: "1.2rem" }}>{this.state.selectedSliceLabel}</label>
                            <label className="options-label" style={{ fontSize: "2.2rem" }}>{this.state.selectedSliceValue}</label>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    public onChartRef(chart: IgrDoughnutChart) {
        if (!chart) { return; }

        this.chart  = chart;
        if (this.legend) {
            this.chart.actualSeries[0].legend = this.legend;
        }

        if (this.chart.actualSeries &&
            this.chart.actualSeries.length > 0) {
            let series = this.chart.actualSeries[0] as IgrRingSeries;
            series.selectedSlices.add(0);
        }
    }

    public onLegendRef(legend: IgrItemLegend) {
        if (!legend) { return; }

        this.legend = legend;
        if (this.chart) {
            this.chart.actualSeries[0].legend = this.legend;
        }
    }

    public onSliceClick = (s: IgrDoughnutChart, e: IgrSliceClickEventArgs) => {
        if (e.isSelected) {
            this.setState({
                selectedSliceLabel: this.data[e.index].Category,
                selectedSliceValue: this.data[e.index].MarketShare + "%"
            });
        } else {
            this.setState({
                selectedSliceLabel: "No Selection",
                selectedSliceValue: "0%"
            });
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DoughnutChartSelection/>);
tsxコピー

Edit in: Codesandbox

React ドーナツ チャート - 複数のリング

React ドーナツ チャートに複数の輪を表示して、各輪を異なるデータ 項目にバインドしたり、共通のデータ ソースを共有したりすることができます。これは、以下の季節ごとのデータ表示など、基礎となる共通のカテゴリを持つ層としてデータを表示する必要がある場合に役立ちます:

EXAMPLE

CalendarMonths.ts

CalendarSeasons.ts

TSX

CSS

export class CalendarMonthsItem {
    public constructor(init: Partial<CalendarMonthsItem>) {
        Object.assign(this, init);
    }

    public value: number;
    public label: string;

}
export class CalendarMonths extends Array<CalendarMonthsItem> {
    public constructor(items: Array<CalendarMonthsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `December`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `January`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `February`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `March`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `April`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `May`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `June`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `July`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `August`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `September`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `October`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `November`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

export class CalendarSeasonsItem {
    public constructor(init: Partial<CalendarSeasonsItem>) {
        Object.assign(this, init);
    }

    public value: number;
    public label: string;

}
export class CalendarSeasons extends Array<CalendarSeasonsItem> {
    public constructor(items: Array<CalendarSeasonsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CalendarSeasonsItem(
                {
                    value: 4,
                    label: `Winter`
                }),
                new CalendarSeasonsItem(
                {
                    value: 4,
                    label: `Spring`
                }),
                new CalendarSeasonsItem(
                {
                    value: 4,
                    label: `Summer`
                }),
                new CalendarSeasonsItem(
                {
                    value: 4,
                    label: `Fall`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrLegendModule, IgrDoughnutChartModule } from "@infragistics/igniteui-react-charts";
import { IgrDoughnutChart, IgrRingSeries } from "@infragistics/igniteui-react-charts";
import { CalendarSeasonsItem, CalendarSeasons } from './CalendarSeasons';
import { CalendarMonthsItem, CalendarMonths } from './CalendarMonths';

const mods: any[] = [
    IgrLegendModule,
    IgrDoughnutChartModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private chart: IgrDoughnutChart
    private chartRef(r: IgrDoughnutChart) {
        this.chart = r;
        this.setState({});
    }
    private series1: IgrRingSeries
    private series2: IgrRingSeries

    constructor(props: any) {
        super(props);

        this.chartRef = this.chartRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample">

            <div className="legend-title">
                Hierarchical Chart
            </div>

            <div className="container fill">
                <IgrDoughnutChart
                    ref={this.chartRef}
                    allowSliceExplosion="false"
                    allowSliceSelection="false">
                    <IgrRingSeries
                        name="series1"
                        labelMemberPath="label"
                        valueMemberPath="value"
                        labelsPosition="Center"
                        radiusFactor="0.9"
                        outlines="white"
                        brushes="rgba(60, 189, 201, 1) rgba(159, 179, 40, 1) rgba(249, 98, 50, 1) rgba(138, 88, 214, 1)"
                        dataSource={this.calendarSeasons}>
                    </IgrRingSeries>
                    <IgrRingSeries
                        name="series2"
                        labelMemberPath="label"
                        valueMemberPath="value"
                        labelsPosition="Center"
                        radiusFactor="0.9"
                        outlines="white"
                        brushes="rgba(60, 189, 201, 1) rgba(60, 189, 201, 1) rgba(60, 189, 201, 1) rgba(159, 179, 40, 1) rgba(159, 179, 40, 1) rgba(159, 179, 40, 1) rgba(249, 98, 50, 1) rgba(249, 98, 50, 1) rgba(249, 98, 50, 1) rgba(138, 88, 214, 1) rgba(138, 88, 214, 1) rgba(138, 88, 214, 1)"
                        dataSource={this.calendarMonths}>
                    </IgrRingSeries>
                </IgrDoughnutChart>
            </div>
        </div>
        );
    }

    private _calendarSeasons: CalendarSeasons = null;
    public get calendarSeasons(): CalendarSeasons {
        if (this._calendarSeasons == null)
        {
            this._calendarSeasons = new CalendarSeasons();
        }
        return this._calendarSeasons;
    }

    private _calendarMonths: CalendarMonths = null;
    public get calendarMonths(): CalendarMonths {
        if (this._calendarMonths == null)
        {
            this._calendarMonths = new CalendarMonths();
        }
        return this._calendarMonths;
    }

}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
cssコピー

Edit in: Codesandbox

その他のリソース

関連するチャートタイプの詳細については、以下のトピックを参照してください。

• 円チャート
• 極座標チャート
• ラジアル チャート

API リファレンス

以下のテーブルは、上記のセクションで説明した API メンバーをリストします。

• IgrDoughnutChart
• allowSliceExplosion
• allowSliceSelection
• innerExtent
• SliceClick