Angular 도넛 차트

Ignite UI for 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

Angular 도넛 차트 추천

Angular Donut 차트가 귀하의 프로젝트에 적합할까요?

도넛 차트는 작은 데이터 세트에 적합하며 한 눈에 쉽게 읽을 수 있습니다. 도넛형 차트는 부분에서 전체까지의 시각화 유형 중 하나일 뿐입니다. 기타에는 다음이 포함됩니다.

• 파이

• 누적 영역
• 누적 100% 영역(누적 백분율 영역)
• 누적 막대
• 누적 100% 막대(누적 백분율 막대)
• 트리맵
• 폭포

Angular 도넛 차트 에는 뷰어가 데이터를 분석할 수 있는 도구를 제공하는 대화형 기능이 포함되어 있습니다.

• 전설
• 슬라이스 폭발
• 슬라이스 선택
• 차트 애니메이션

도넛 차트 모범 사례

• 여러 데이터 세트를 사용하여 데이터를 링 디스플레이에 표시합니다.
• 데이터의 빠른 설명을 위해 도넛의 구멍 안에 값이나 라벨 등의 정보를 배치합니다.
• 슬라이스 또는 세그먼트를 전체 값 또는 전체에 비례하는 백분율 값으로 비교합니다.
• 카테고리 그룹이 더 작은 세그먼트로 분할되는 방식을 보여줍니다.
• 데이터 세그먼트의 합이 100%가 되도록 보장합니다.
• 부품의 세그먼트/슬라이스에 대해 색상 팔레트를 구별할 수 있는지 확인합니다.

도넛 차트 사용하지 말아야 할 경우

• 시간에 따른 변화 비교 -막대, 선 또는 영역 차트를 사용합니다.
• 정확한 데이터 비교가 필요한 경우 막대, 선 또는 영역 차트를 사용하세요.
• 6개 또는 8개 이상의 세그먼트(높은 데이터 볼륨)가 있습니다. 데이터 스토리에 적합한 경우 막대, 선 또는 영역 차트를 고려하세요.
• ​막대 차트에서 값 차이를 보는 사람이 더 쉽게 인식할 수 있습니다.
• 도넛 차트로 표현할 수 없는 부정적인 데이터가 있습니다.

Angular 도넛 차트- 슬라이스 선택

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

DATA

MODULES

TS

HTML

SCSS

// NOTE this file contains multiple data sources:


// Data Source #1
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));
        }
    }
}



// Data Source #2
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