Angular ドーナツ チャート

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

60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。

無料で試してみる

Angular ドーナツ チャートの例

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

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxItemLegendModule, IgxDoughnutChartModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxItemLegendModule,
    IgxDoughnutChartModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import { IgxItemLegendComponent, IgxDoughnutChartComponent, IgxRingSeriesComponent } from 'igniteui-angular-charts';

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements AfterViewInit
{

    @ViewChild("legend", { static: true } )
    private legend: IgxItemLegendComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxDoughnutChartComponent
    @ViewChild("series", { static: true } )
    private series: IgxRingSeriesComponent
    private _energyGlobalDemand: EnergyGlobalDemand = null;
    public get energyGlobalDemand(): EnergyGlobalDemand {
        if (this._energyGlobalDemand == null)
        {
            this._energyGlobalDemand = new EnergyGlobalDemand();
        }
        return this._energyGlobalDemand;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="legend-title">
      Global Electricity Demand by Energy Use
  </div>
  <div class="legend">
      <igx-item-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-item-legend>
  </div>
  <div class="container fill">
      <igx-doughnut-chart
      name="chart"
      #chart
      allowSliceExplosion="true">
          <igx-ring-series
          name="series"
          #series
          labelMemberPath="summary"
          labelsPosition="OutsideEnd"
          labelExtent="30"
          valueMemberPath="value"
          legendLabelMemberPath="category"
          outlines="white"
          radiusFactor="0.6"
          startAngle="30"
          [dataSource]="energyGlobalDemand"
          [legend]="legend">
          </igx-ring-series>
      </igx-doughnut-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

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

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

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

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

• 円

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

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

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

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

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

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

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

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

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxDoughnutChartModule, IgxRingSeriesModule, IgxLegendModule, IgxItemLegendModule } from "igniteui-angular-charts";


@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxDoughnutChartModule,
    IgxRingSeriesModule,
    IgxLegendModule,
    IgxItemLegendModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild } from "@angular/core";
import { IgxDoughnutChartComponent } from "igniteui-angular-charts";
import { IgxRingSeriesComponent } from "igniteui-angular-charts";
import { IgxSliceClickEventArgs } from "igniteui-angular-charts";

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html"
})
export class AppComponent implements AfterViewInit {

    public data: any;
    public selectedSliceLabel : string = "No Selection";
    public selectedSliceValue : string = "0%";

    @ViewChild("chart", { static: true })
    public chart: IgxDoughnutChartComponent;

    constructor() {
        this.data = [
            { Value: 37, Label: "Cooling", Summary: "Cooling 37%" },
            { Value: 25, Label: "Residential", Summary: "Residential 25%"  },
            { Value: 12, Label: "Heating", Summary: "Heating 12%" },
            { Value: 11, Label: "Lighting", Summary: "Lighting 11%" },
            { Value: 18, Label: "Other", Summary: "Other 18%" }
        ];

    }


    public OnSliceClick(e: any) {

        if (e.args.isSelected)
        {
            this.selectedSliceLabel = this.data[e.args.index].Label;
            this.selectedSliceValue = this.data[e.args.index].Value + "%";
        }
        else
        {
            this.selectedSliceLabel = "No Selection";
            this.selectedSliceValue = "0%";
        }
    }

    public ngAfterViewInit(): void {
    }


}
tsコピー

<div class="container vertical">
    <div class="options horizontal">
        <div class="options vertical">
            <span id="legendTitle">Global Electricity Demand by Energy Use</span>
            <div class="legend">
                <igx-item-legend #legend height="100px" width="100px" orientation="horizontal"></igx-item-legend>
            </div>
        </div>
    </div>

    <div class="container relative">
        <div class="container-overlay">
            <igx-doughnut-chart #chart height="100%" width="100%"
                allowSliceSelection="true" innerExtent="0.6"
                (sliceClick)="OnSliceClick($event)"
                selectedSliceStroke="White"
                selectedSliceFill="Gray"
                selectedSliceStrokeThickness="1"
                selectedSliceOpacity="0.75">
                <igx-ring-series
                    [dataSource]="data"
                    valueMemberPath="Value"
                    labelMemberPath="Summary"
                    legendLabelMemberPath="Label"
                    [legend]="legend"
                    selectedSliceStroke = "white"
                    selectedSliceFill= "rgb(143,143,143)"
                    selectedSliceOpacity =1.0
                    selectedSliceStrokeThickness=2
                    startAngle=260
                    labelsPosition="OutsideEnd"
                    labelExtent="30"
                    radiusFactor="0.6" >
                </igx-ring-series>
            </igx-doughnut-chart>

        <div class="overlay-center" style="line-height: 1.1; text-align: center;">
            <label style="font-size: 1.2rem;"><span [textContent]="selectedSliceLabel"></span></label>
            <label style="font-size: 2.2rem;"><span [textContent]="selectedSliceValue"></span></label>
        </div>
    </div>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

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

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

EXAMPLE

CalendarMonths.ts

CalendarSeasons.ts

MODULES

TS

HTML

SCSS

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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxLegendModule, IgxDoughnutChartModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxLegendModule,
    IgxDoughnutChartModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CalendarSeasonsItem, CalendarSeasons } from './CalendarSeasons';
import { CalendarMonthsItem, CalendarMonths } from './CalendarMonths';
import { IgxDoughnutChartComponent, IgxRingSeriesComponent } from 'igniteui-angular-charts';

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements AfterViewInit
{

    @ViewChild("chart", { static: true } )
    private chart: IgxDoughnutChartComponent
    @ViewChild("series1", { static: true } )
    private series1: IgxRingSeriesComponent
    @ViewChild("series2", { static: true } )
    private series2: IgxRingSeriesComponent
    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;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="legend-title">
      Hierarchical Chart
  </div>
  <div class="container fill">
      <igx-doughnut-chart
      name="chart"
      #chart
      allowSliceExplosion="false"
      allowSliceSelection="false">
          <igx-ring-series
          name="series1"
          #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]="calendarSeasons">
          </igx-ring-series>
          <igx-ring-series
          name="series2"
          #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]="calendarMonths">
          </igx-ring-series>
      </igx-doughnut-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

その他のリソース

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

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

API リファレンス

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

• IgxDoughnutChartComponent
• allowSliceExplosion
• allowSliceSelection
• innerExtent
• SliceClick