Angular 차트 도구 설명

Angular 차트에서 툴팁은 바인딩된 데이터에 대한 세부 정보를 제공하며 최종 사용자가 데이터 포인트 위로 마우스를 가져가면 팝업으로 렌더링됩니다. 툴팁은 IgxCategoryChartComponent, IgxFinancialChartComponent 및 IgxDataChartComponent 컨트롤에서 지원됩니다.

Angular Chart는 toolTipType 속성을 설정하여 툴팁을 활성화할 수 있는 세 가지 유형의 툴팁을 제공합니다. 다음 예에서는 툴팁 유형을 변경하는 데 사용할 수 있는 콤보 상자가 있는 기둥 차트 보여줍니다.

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

    public franchise: string;
    public totalRevenue: number;
    public highestGrossing: number;

}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
    public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new HighestGrossingMoviesItem(
                {
                    franchise: `Marvel Universe`,
                    totalRevenue: 22.55,
                    highestGrossing: 2.8
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Star Wars`,
                    totalRevenue: 10.32,
                    highestGrossing: 2.07
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Harry Potter`,
                    totalRevenue: 9.19,
                    highestGrossing: 1.34
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Avengers`,
                    totalRevenue: 7.76,
                    highestGrossing: 2.8
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Spider Man`,
                    totalRevenue: 7.22,
                    highestGrossing: 1.28
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `James Bond`,
                    totalRevenue: 7.12,
                    highestGrossing: 1.11
                }),
            ];
            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 { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts';
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';

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

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';

import { defineAllComponents } from 'igniteui-webcomponents';

defineAllComponents();

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

export class AppComponent implements AfterViewInit
{

    @ViewChild("propertyEditor", { static: true } )
    private propertyEditor: IgxPropertyEditorPanelComponent
    @ViewChild("toolTipTypeEditor", { static: true } )
    private toolTipTypeEditor: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("legend", { static: true } )
    private legend: IgxLegendComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxCategoryChartComponent
    private _highestGrossingMovies: HighestGrossingMovies = null;
    public get highestGrossingMovies(): HighestGrossingMovies {
        if (this._highestGrossingMovies == null)
        {
            this._highestGrossingMovies = new HighestGrossingMovies();
        }
        return this._highestGrossingMovies;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            LegendDescriptionModule.register(context);
            CategoryChartDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

ts

<div class="container vertical sample">
  <div class="options vertical">
      <igx-property-editor-panel
      name="PropertyEditor"
      #propertyEditor
      [componentRenderer]="renderer"
      [target]="chart"
      descriptionType="CategoryChart"
      isHorizontal="true"
      isWrappingEnabled="true">
          <igx-property-editor-property-description
          propertyPath="ToolTipType"
          name="ToolTipTypeEditor"
          #toolTipTypeEditor
          label="ToolTip Type: "
          primitiveValue="Data">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="legend-title">
      Highest Grossing Movie Franchises
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend>
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      chartType="Column"
      [legend]="legend"
      [dataSource]="highestGrossingMovies"
      xAxisInterval="1"
      yAxisTitle="Billions of U.S. Dollars"
      yAxisTitleLeftMargin="10"
      yAxisTitleRightMargin="5"
      yAxisLabelLeftMargin="0"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      crosshairsSnapToData="true">
      </igx-category-chart>
  </div>
</div>
html

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

이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

toolTipType 속성은 구성 가능하며 다음 옵션 중 하나로 설정할 수 있습니다.

자산 가치	설명
`Default`툴팁	포인터를 항목 위에 놓으면 해당 항목에 대한 도구 설명이 표시됩니다.
`Data`툴팁	차트의 모든 계열에 대한 데이터 도구 설명을 표시합니다.
`Item`툴팁	포인터가 위치한 범주의 각 데이터 항목에 대한 도구 설명을 표시합니다.
`Category`툴팁	포인터가 위치한 범주의 모든 데이터 포인트에 대해 그룹화된 도구 설명을 표시합니다.

기본 제공 유형의 툴팁이 요구 사항과 일치하지 않는 경우, 시리즈 제목, 데이터 값 및 축 값을 표시하고 스타일을 지정하는 고유한 툴팁을 만들 수 있습니다. 다음 섹션에서는 다양한 유형의 Angular 차트에서 이를 수행하는 방법을 보여줍니다.

카테고리 차트의 사용자 정의 도구 설명

이 예제는 Angular IgxCategoryChartComponent 컨트롤의 모든 시리즈에 대한 사용자 정의 툴팁을 만드는 방법을 보여줍니다. Angular IgxFinancialChartComponent 컨트롤의 사용자 정의 툴팁에도 동일한 논리를 적용할 수 있습니다.

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 { IgxCategoryChartModule, IgxLegendModule } from "igniteui-angular-charts";


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

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxCategoryChartModule,
    IgxLegendModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
ts

import { ChangeDetectionStrategy, Component, ViewChild, TemplateRef } from "@angular/core";

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

    public data = [
        { Franchise: "Marvel Universe All Films", TotalRevenue: 22.55, HighestGrossing: 2.8 },
        { Franchise: "Star Wars", TotalRevenue: 10.32, HighestGrossing: 2.07 },
        { Franchise: "Harry Potter", TotalRevenue: 9.19, HighestGrossing: 1.34 },
        { Franchise: "Avengers", TotalRevenue: 7.76, HighestGrossing: 2.8 },
        { Franchise: "Spider Man", TotalRevenue: 7.22, HighestGrossing: 1.28 },
        { Franchise: "James Bond", TotalRevenue: 7.12, HighestGrossing: 1.11 }
    ];

    @ViewChild('valueTooltip', { static: true })
    public valueTooltip: TemplateRef<object>;

    constructor() {
    }

    public onSeriesAdded(e: any) {
        if (e.args.series) {
            e.args.series.tooltipTemplate = this.valueTooltip;
        }
    }
}
ts

<div class="container vertical">
    <div class="options vertical">
        <span id="legendTitle">Highest Grossing Movie Franchises</span>
        <div class="legend">
            <igx-legend #legend orientation="horizontal"></igx-legend>
        </div>
    </div>
    <div class="container">
        <igx-category-chart height="100%" width="100%"
                       [dataSource]="data"
                       isTransitionInEnabled="true"
                       xAxisInterval="1"
                       chartType="Column"
                       toolTipType="None"
                       (seriesAdded)="onSeriesAdded($event)"
                       >
        </igx-category-chart>


        <ng-template let-series="series" let-item="item" #valueTooltip>
            <div class="tooltipVertical">
                <span class="tooltipTitle">Franchise: {{item.Franchise}}<br/></span>
                <span class="tooltipLbl">Revenue of All Movies: {{item.TotalRevenue}}<br/></span>
                <span class="tooltipLbl">Highest Grossing Movie: $ {{item.HighestGrossing}}<br/></span>
            </div>
        </ng-template>
    </div>
</div>
html

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

데이터 차트의 사용자 정의 도구 설명

이 예제에서는 Angular 데이터 차트 컨트롤의 각 시리즈에 대한 사용자 정의 도구 설명을 만드는 방법을 보여줍니다.

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 { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxLegendModule, IgxDataChartInteractivityModule } from "igniteui-angular-charts";


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

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryModule,
    IgxLegendModule,
    IgxDataChartInteractivityModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
ts

import { Component } from "@angular/core";
import { UnknownValuePlotting } from "igniteui-angular-core";

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

    public data: any;
    public unknownValuePlotting: UnknownValuePlotting = UnknownValuePlotting.DontPlot;

    constructor() {
        this.data = [
            { Country: "Canada", Coal: 400, Oil: 100, Gas: 175, Nuclear: 225, Hydro: 350 },
            { Country: "China", Coal: 925, Oil: null, Gas: null, Nuclear: 400, Hydro: 625 },
            { Country: "Russia", Coal: 550, Oil: null, Gas: null, Nuclear: 475, Hydro: 425 },
            { Country: "Australia", Coal: 450, Oil: 100, Gas: 150, Nuclear: 175, Hydro: 350 },
            { Country: "United States", Coal: 800, Oil: 250, Gas: 475, Nuclear: 575, Hydro: 750 },
            { Country: "France", Coal: 375, Oil: 150, Gas: 350, Nuclear: 275, Hydro: 325 }
        ];
    }
}
ts

<div class="container vertical">
    <div class="options vertical">
        <label id="legendTitle">Energy Production by Source</label>
    </div>
    <div class="container">
        <igx-data-chart #chart height="100%" width="100%" [dataSource]="data"
        isHorizontalZoomEnabled="false" isVerticalZoomEnabled="false"
        computedPlotAreaMarginMode="Series">

            <igx-category-x-axis #xAxis name="xAxis" label="Country"></igx-category-x-axis>
            <igx-numeric-y-axis #yAxis name="yAxis" minValue=0></igx-numeric-y-axis>

            <!-- <igx-line-series name="series1" title="Coal" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Coal"
              showDefaultTooltip=false [tooltipTemplate]="valueTooltip"></igx-line-series>
            <igx-line-series name="series2" title="Hydro" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Hydro"
              showDefaultTooltip=false [tooltipTemplate]="valueTooltip"></igx-line-series>
            <igx-line-series name="series3" title="Nuclear" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Nuclear"
              showDefaultTooltip=false [tooltipTemplate]="valueTooltip"></igx-line-series> -->
            <igx-line-series name="series4" title="Gas" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Gas"
              showDefaultTooltip=false [tooltipTemplate]="valueTooltip" [unknownValuePlotting]="unknownValuePlotting"></igx-line-series>
            <igx-line-series name="series5" title="Oil" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Oil"
              showDefaultTooltip=false [tooltipTemplate]="valueTooltip" unknownValuePlotting="LinearInterpolate"></igx-line-series>
          </igx-data-chart>
    </div>

    <ng-template let-series="series" let-item="item" #valueTooltip>
        <div>
            <label class=“tooltipTitle”>{{item.Country}} Production<br/></label>
            <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Coal' ? series.actualBrush : 'black'"> Coal: {{item.Coal | number}}<br/></label>
            <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Hydro' ? series.actualBrush : 'black'"> Hydro: {{item.Hydro | number}}<br/></label>
            <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Oil' ? series.actualBrush : 'black'"> Oil: {{item.Oil | number}}<br/></label>
            <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Gas' ? series.actualBrush : 'black'"> Gas: {{item.Gas | number}}<br/></label>
            <label class=“tooltipLbl” [style.color]="series.valueMemberPath == 'Nuclear' ? series.actualBrush : 'black'"> Nuclear: {{item.Nuclear | number}}<br/></label>
        </div>
    </ng-template>
</div>
html

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

추가 리소스

다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.

API 참조

IgxCategoryChartComponent 및 IgxFinancialChartComponent 구성 요소는 다음 API 속성을 공유합니다.

toolTipType

IgxDataChartComponent 구성 요소에서는 다음 API 구성 요소 및 속성을 사용할 수 있습니다.

Angular 차트 도구 설명