Angular Toolbar Component | Ignite UI for Angular

Angular Toolbar 구성 요소는 주로 차트 구성 요소와 함께 사용되는 UI 작업을 위한 동반 컨테이너입니다. 툴바는 IgxDataChartComponent 또는 IgxCategoryChartComponent 구성 요소에 연결될 때 속성 및 도구 항목의 사전 설정으로 동적으로 업데이트됩니다. 프로젝트에 대한 사용자 정의 도구를 만들어 최종 사용자가 변경 사항을 제공할 수 있으므로 무한한 양의 사용자 정의가 가능합니다.

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

    public year: string;
    public europe: number;
    public china: number;
    public america: number;

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            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, IgxCategoryChartModule, IgxCategoryChartToolbarModule } from 'igniteui-angular-charts';
import { IgxToolbarModule } from 'igniteui-angular-layouts';
import { IgxCheckboxListModule } from 'igniteui-angular-grids';

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

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
import { IgxToolbarComponent } from 'igniteui-angular-layouts';

@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: IgxLegendComponent
    @ViewChild("toolbar", { static: true } )
    private toolbar: IgxToolbarComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxCategoryChartComponent
    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

ts

<div class="container vertical sample">
  <div class="legend-title">
      Renewable Electricity Generated
  </div>
  <div class="aboveContentSplit">
    <div class="aboveContentLeftContainer">
      <igx-toolbar
      name="toolbar"
      #toolbar
      [target]="chart"
      orientation="Horizontal">
      </igx-toolbar>
    </div>
    <div class="aboveContentRightContainer">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
    </div>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      chartType="Line"
      isHorizontalZoomEnabled="true"
      isVerticalZoomEnabled="true"
      [dataSource]="countryRenewableElectricity"
      includedProperties="year, europe, china, america"
      [legend]="legend"
      yAxisTitle="TWh"
      yAxisTitleLeftMargin="10"
      yAxisTitleRightMargin="5"
      yAxisLabelLeftMargin="0"
      yAxisLabelLocation="OutsideRight"
      isTransitionInEnabled="true">
      </igx-category-chart>
  </div>
</div>
html

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.aboveContentSplit {
    display: flex;
    flex-direction: row;
}
.aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-end;
}
.aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: flex-end;
}
scss

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

Dependencies

Ignite UI for Angular 설치:

npm install igniteui-angular-layouts
npm install igniteui-angular-inputs
npm install igniteui-angular-charts
npm install igniteui-angular-core
cmd

IgxDataChartComponent 컴포넌트 및 해당 기능과 함께 IgxToolbarComponent 사용할 때 다음 모듈이 필요합니다.

import { IgxToolbarModule } from 'igniteui-angular-layouts';
import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCategoryTrendLineModule  } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxToolbarModule,
        IgxDataChartToolbarModule,
        IgxDataChartCoreModule,
        IgxDataChartCategoryModule,
        IgxDataChartAnnotationModule,
        IgxDataChartInteractivityModule,
        IgxDataChartCategoryTrendLineModule
        // ...
    ]
})
export class AppModule {}
ts

import { IgxToolbarModule } from 'igniteui-react-layouts';
import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule  } from 'igniteui-react-charts';

IgxToolbarModule.register();
IgrDataChartToolbarModule.register();
IgrDataChartCoreModule.register();
IgrDataChartCategoryModule.register();
IgrDataChartAnnotationModule.register();
IgrDataChartInteractivityModule.register();
IgrDataChartCategoryTrendLineModule.register();
ts

Usage

Tool Actions

다음은 도구 모음에 추가할 수 있는 다양한 IgxToolActionComponent 항목 목록입니다.

이러한 각 도구는 마우스 클릭에 의해 트리거되는 이벤트를 노출합니다 OnCommand. 참고로, the IgxToolActionIconMenuComponent는 내부에 래핑할 수 있는 다른 도구에 대한 래퍼입니다 IgxToolActionIconMenuComponent.

IgxToolActionComponent 객체의 overlayId, beforeId 및 afterId 속성을 사용하여 새로운 도구와 기존 도구의 위치를 변경하고 숨김으로 표시할 수 있습니다. ToolActions는 visibility 속성도 노출합니다.

다음 예제에서는 몇 가지 기능을 보여 줍니다. 먼저 도구를 그룹화할 수 있습니다. IgxToolActionSubPanelComponent 다음과 같은 내장 도구 숨기기를 포함합니다. 줌리셋 그리고 분석메뉴 메뉴 도구 작업. 이 예에서는 의 새 인스턴스가 있습니다. 줌리셋 도구 작업이 추가되어 줌메뉴를 사용하여 afterId 속성을 할당하고 축소. 또한 를 통해 강조 표시됩니다. isHighlighted 속성을 사용합니다. 이렇게 하면 새 재설정 도구가 맨 아래에 즉시 표시됩니다. 줌메뉴.

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

    public year: string;
    public europe: number;
    public china: number;
    public america: number;

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            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 { IgxToolbarModule } from 'igniteui-angular-layouts';
import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCategoryTrendLineModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxToolbarModule,
    IgxDataChartToolbarModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryModule,
    IgxDataChartAnnotationModule,
    IgxDataChartInteractivityModule,
    IgxDataChartCategoryTrendLineModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
ts

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxToolCommandEventArgs } from 'igniteui-angular-layouts';
import { IgxDataChartComponent, IgxSeriesComponent, IgxDataToolTipLayerComponent, IgxCrosshairLayerComponent, IgxFinalValueLayerComponent } from 'igniteui-angular-charts';
import { IgxToolbarComponent, IgxToolActionIconMenuComponent, IgxToolActionGroupHeaderComponent, IgxToolActionSubPanelComponent, IgxToolActionCheckboxComponent, IgxToolActionLabelComponent } from 'igniteui-angular-layouts';
import { IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent } 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("toolbar", { static: true } )
    private toolbar: IgxToolbarComponent
    @ViewChild("menuForSubPanelTool", { static: true } )
    private menuForSubPanelTool: IgxToolActionIconMenuComponent
    @ViewChild("subPanelGroup", { static: true } )
    private subPanelGroup: IgxToolActionGroupHeaderComponent
    @ViewChild("customSubPanelTools", { static: true } )
    private customSubPanelTools: IgxToolActionSubPanelComponent
    @ViewChild("enableTooltipsLabel", { static: true } )
    private enableTooltipsLabel: IgxToolActionCheckboxComponent
    @ViewChild("enableCrosshairsLabel", { static: true } )
    private enableCrosshairsLabel: IgxToolActionCheckboxComponent
    @ViewChild("enableFinalValuesLabel", { static: true } )
    private enableFinalValuesLabel: IgxToolActionCheckboxComponent
    @ViewChild("zoomResetLabel", { static: true } )
    private zoomResetLabel: IgxToolActionLabelComponent
    @ViewChild("zoomResetHidden", { static: true } )
    private zoomResetHidden: IgxToolActionLabelComponent
    @ViewChild("analyzeMenu", { static: true } )
    private analyzeMenu: IgxToolActionIconMenuComponent
    @ViewChild("copyMenu", { static: true } )
    private copyMenu: IgxToolActionLabelComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxDataChartComponent
    @ViewChild("xAxis", { static: true } )
    private xAxis: IgxCategoryXAxisComponent
    @ViewChild("yAxis", { static: true } )
    private yAxis: IgxNumericYAxisComponent
    @ViewChild("lineSeries1", { static: true } )
    private lineSeries1: IgxLineSeriesComponent
    @ViewChild("lineSeries2", { static: true } )
    private lineSeries2: IgxLineSeriesComponent
    @ViewChild("lineSeries3", { static: true } )
    private lineSeries3: IgxLineSeriesComponent
    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

    public toolbarToggleAnnotations({ sender, args }: { sender: any, args: IgxToolCommandEventArgs }): void {
        var target = this.chart;
        switch (args.command.commandId)
        {
            case "EnableTooltips":
                var enable = args.command.argumentsList[0].value as boolean;
                if (enable)
                {
                    target.series.add(new IgxDataToolTipLayerComponent());
                }
                else
                {
                    var toRemove = null;
                    for (var i = 0; i < target.actualSeries.length; i++) {
                        let s = target.actualSeries[i] as IgxSeriesComponent;
                        if (s instanceof IgxDataToolTipLayerComponent)
                        {
                            toRemove = s;
                        }
                    }
                    if (toRemove != null)
                    {
                        target.series.remove(toRemove);
                    }
                }
            break;
            case "EnableCrosshairs":
                var enable = args.command.argumentsList[0].value as boolean;
                if (enable)
                {
                    target.series.add(new IgxCrosshairLayerComponent());
                }
                else
                {
                    var toRemove = null;
                    for (var i = 0; i < target.actualSeries.length; i++) {
                        let s = target.actualSeries[i] as IgxSeriesComponent;
                        if (s instanceof IgxCrosshairLayerComponent)
                        {
                            toRemove = s;
                        }
                    }
                    if (toRemove != null)
                    {
                        target.series.remove(toRemove);
                    }
                }
            break;
            case "EnableFinalValues":
                var enable = args.command.argumentsList[0].value as boolean;
                if (enable)
                {
                    target.series.add(new IgxFinalValueLayerComponent());
                }
                else
                {
                    var toRemove = null;
                    for (var i = 0; i < target.actualSeries.length; i++) {
                        let s = target.actualSeries[i] as IgxSeriesComponent;
                        if (s instanceof IgxFinalValueLayerComponent)
                        {
                            toRemove = s;
                        }
                    }
                    if (toRemove != null)
                    {
                        target.series.remove(toRemove);
                    }
                }
                break;
        }
    }

}

ts

<div class="container vertical sample">
  <div class="aboveContentSplit">
    <div class="aboveContentLeftContainer">
      <igx-toolbar
      name="toolbar"
      #toolbar
      [target]="chart"
      orientation="Horizontal"
      (onCommand)="this.toolbarToggleAnnotations($event)">
          <igx-tool-action-icon-menu
          name="MenuForSubPanelTool"
          #menuForSubPanelTool
          iconCollectionName="ChartToolbarIcons"
          iconName="analyze">
              <igx-tool-action-group-header
              name="SubPanelGroup"
              #subPanelGroup
              closeOnExecute="true"
              title="Visualizations"
              subtitle="Layers">
              </igx-tool-action-group-header>
              <igx-tool-action-sub-panel
              name="CustomSubPanelTools"
              #customSubPanelTools>
                  <igx-tool-action-checkbox
                  name="EnableTooltipsLabel"
                  #enableTooltipsLabel
                  title="Enable Tooltips"
                  commandId="EnableTooltips">
                  </igx-tool-action-checkbox>
                  <igx-tool-action-checkbox
                  name="EnableCrosshairsLabel"
                  #enableCrosshairsLabel
                  title="Enable Crosshairs"
                  commandId="EnableCrosshairs">
                  </igx-tool-action-checkbox>
                  <igx-tool-action-checkbox
                  name="EnableFinalValuesLabel"
                  #enableFinalValuesLabel
                  title="Enable Final Values"
                  commandId="EnableFinalValues">
                  </igx-tool-action-checkbox>
              </igx-tool-action-sub-panel>
          </igx-tool-action-icon-menu>
          <igx-tool-action-label
          name="zoomResetLabel"
          #zoomResetLabel
          title="Reset"
          afterId="ZoomOut"
          iconName="reset"
          iconCollectionName="ChartToolbarIcons"
          commandId="ZoomReset"
          isHighlighted="true">
          </igx-tool-action-label>
          <igx-tool-action-label
          name="zoomResetHidden"
          #zoomResetHidden
          overlayId="ZoomReset"
          visibility="Collapsed">
          </igx-tool-action-label>
          <igx-tool-action-icon-menu
          name="AnalyzeMenu"
          #analyzeMenu
          overlayId="AnalyzeMenu"
          visibility="Collapsed">
          </igx-tool-action-icon-menu>
          <igx-tool-action-label
          name="CopyMenu"
          #copyMenu
          overlayId="CopyMenu"
          visibility="Collapsed">
          </igx-tool-action-label>
      </igx-toolbar>
    </div>
    <div class="aboveContentRightContainer">
      <!-- insert aboveContentRight -->
      <!-- end aboveContentRight -->
    </div>
  </div>
  <div class="container fill">
      <igx-data-chart
      computedPlotAreaMarginMode="Series"
      isHorizontalZoomEnabled="true"
      isVerticalZoomEnabled="true"
      name="chart"
      #chart>
          <igx-category-x-axis
          name="xAxis"
          #xAxis
          [dataSource]="countryRenewableElectricity"
          label="year">
          </igx-category-x-axis>
          <igx-numeric-y-axis
          name="yAxis"
          #yAxis
          title="TWh"
          labelLocation="OutsideRight">
          </igx-numeric-y-axis>
          <igx-line-series
          name="lineSeries1"
          #lineSeries1
          title="Electricity"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [dataSource]="countryRenewableElectricity"
          valueMemberPath="america">
          </igx-line-series>
          <igx-line-series
          name="LineSeries2"
          #lineSeries2
          title="Electricity"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [dataSource]="countryRenewableElectricity"
          valueMemberPath="europe">
          </igx-line-series>
          <igx-line-series
          name="LineSeries3"
          #lineSeries3
          title="Electricity"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [dataSource]="countryRenewableElectricity"
          valueMemberPath="china">
          </igx-line-series>
      </igx-data-chart>
  </div>
</div>
html

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.aboveContentSplit {
    display: flex;
    flex-direction: row;
}
.aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-end;
}
.aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: flex-end;
}
scss

Angular Data Chart Integration

Angular Toolbar에는 Target 속성이 포함되어 있습니다. 이는 아래 코드에 표시된 IgxDataChartComponent와 같은 구성 요소를 연결하는 데 사용됩니다.

  <div class="legend">
    <igx-toolbar
      name="toolbar"
      [target]="chart"
      #toolbar>
    </igx-toolbar>
  </div>
  <div class="container fill">
    <igx-data-chart
    name="chart"
    #chart>
  </igx-data-chart>
html

IgxDataChartComponent 툴바와 연결되면 기존 IgxToolActionComponent 항목과 메뉴가 여러 개 사용 가능해집니다. 내장된 Angular IgxDataChartComponent 도구 작업과 관련 overlayId 목록은 다음과 같습니다.

확대/축소 작업

ZoomReset: 확대/축소 수준을 기본 위치로 재설정하기 위해 차트에서 resetZoom 메소드를 호출하는 IgxToolActionLabelComponent 입니다.
ZoomMenu: 차트의 확대/축소 수준을 늘리거나 줄이기 위해 차트에서 zoomIn 및 zoomOut 메서드를 호출하기 위해 두 개의 IgxToolActionLabelComponent 항목을 노출하는 IgxToolActionIconMenuComponent 입니다.

추세 조치

AnalyzeMenu: 차트의 다양한 옵션을 구성하기 위한 여러 옵션이 포함된 IgxToolActionIconMenuComponent 입니다.
AnalyzeHeader: 하위 섹션 헤더입니다.
LinesMenu: 차트에 다양한 가로 점선을 표시하기 위한 다양한 도구가 포함된 하위 메뉴입니다.
- LinesHeader: 다음 세 가지 도구에 대한 하위 메뉴 섹션 헤더입니다.
  - MaxValue: 계열의 최대값에서 yAxis를 따라 가로 점선을 표시하는 IgxToolActionCheckboxComponent 입니다.
  - MinValue: 계열의 최소값에서 yAxis를 따라 가로 점선을 표시하는 IgxToolActionCheckboxComponent 입니다.
  - Average: 계열의 평균 값에서 yAxis를 따라 가로 점선을 표시하는 IgxToolActionCheckboxComponent 입니다.
TrendsMenu: A sub menu containing tools for applying various trendlines to the IgxDataChartComponent plot area.
- TrendsHeader: 다음 세 가지 도구에 대한 하위 메뉴 섹션 헤더입니다.
  - 지수의: ᅡ IgxToolActionRadioComponent를 설정합니다. trendLineType 차트의 각 시리즈에서 익스포넨셜핏(ExponentialFit).
  - 선형: ᅡ IgxToolActionRadioComponent를 설정합니다. trendLineType 차트의 각 시리즈에서 리니어핏(LinearFit).
  - 로그: ᅡ IgxToolActionRadioComponent를 설정합니다. trendLineType 차트의 각 계열에서 LogarithmicFit (로그 피팅).
HelpersHeader: 하위 섹션 헤더입니다.
SeriesAvg: Average 유형의 ValueLayerValueMode 사용하여 차트의 시리즈 컬렉션에 IgxValueLayerComponent 추가하거나 제거하는 IgxToolActionCheckboxComponent 입니다.
ValueLabelsMenu: 플롯 영역에 다양한 주석을 표시하기 위한 다양한 도구가 포함된 하위 메뉴입니다 IgxDataChartComponent.
- ValueLabelsHeader: 다음 도구에 대한 하위 메뉴 섹션 헤더입니다.
  - ShowValueLabels: IgxCalloutLayerComponent를 사용하여 데이터 포인트 값을 전환하는 IgxToolActionCheckboxComponent 입니다.
  - ShowLastValueLabel: IgxFinalValueLayerComponent를 사용하여 최종 값 축 주석을 전환하는 IgxToolActionCheckboxComponent 입니다.
ShowCrosshairs: 차트의 crosshairsDisplayMode 속성을 통해 마우스 오버 십자선 주석을 전환하는 IgxToolActionCheckboxComponent 입니다.
ShowGridlines: ㅏ IgxToolActionCheckboxComponent 이를 적용하여 추가 격자선을 전환합니다. MajorStroke X축으로.

이미지에 저장 작업

CopyAsImage: 차트를 클립보드에 복사하는 옵션을 노출하는 A IgxToolActionLabelComponent 입니다.
CopyHeader: 하위 섹션 머리글입니다.

SVG Icons

도구를 수동으로 추가할 때 이 RenderIconFromText 방법을 사용하여 아이콘을 할당할 수 있습니다. 이 메서드에는 세 가지 매개 변수가 있습니다. 첫 번째는 도구에 정의된 아이콘 컬렉션 이름입니다. iconCollectionName 두 번째는 도구에 정의된 아이콘의 이름(예: iconName SVG 문자열 추가)입니다.

Data URL Icons

svg를 추가하는 것과 마찬가지로 URL RegisterIconFromDataURL에서 아이콘 이미지를 추가할 수도 있습니다. 메서드의 세 번째 매개 변수는 문자열 URL을 입력하는 데 사용됩니다.

다음 코드 조각은 아이콘을 추가하는 두 가지 방법을 모두 보여 줍니다.

<igx-tool-action-label
    title="Custom Icon"
    iconName="CustomIcon"
    iconCollectionName="CustomCollection">
</igx-tool-action-label>
html

public toolbarCustomIconOnViewInit(): void {

  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';
  
  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
}
ts

public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");

}
ts

public toolbarCustomIconOnViewInit(): void {

  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';

  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);

}
ts

public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
  
}
ts

@code {

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var toolbar = this.toolbar;

    if (firstRender) {
        this.ToolbarCustomIconOnViewInit();
    }
}

private IgbToolbar toolbar;

public void ToolbarCustomIconOnViewInit()
{
	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
	{
        this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
	}));
}
typescript

}


```tsx
<IgrToolbar orientation="Vertical" />
autohotkey

Vertical Orientation

기본적으로 Angular 도구 모음은 수평으로 표시되지만, orientation 속성을 설정하여 수직으로 표시할 수도 있습니다.

<igx-toolbar orientation="Vertical" />
html

다음 예제는 Angular Toolbar의 수직 방향을 보여줍니다.

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

    public year: string;
    public europe: number;
    public china: number;
    public america: number;

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            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 { IgxToolbarModule } from 'igniteui-angular-layouts';
import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxAnnotationLayerProxyModule, IgxDataChartCategoryTrendLineModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxToolbarModule,
    IgxDataChartToolbarModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryModule,
    IgxDataChartAnnotationModule,
    IgxDataChartInteractivityModule,
    IgxAnnotationLayerProxyModule,
    IgxDataChartCategoryTrendLineModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
ts

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxToolbarComponent } from 'igniteui-angular-layouts';
import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent } 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("toolbar", { static: true } )
    private toolbar: IgxToolbarComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxDataChartComponent
    @ViewChild("xAxis", { static: true } )
    private xAxis: IgxCategoryXAxisComponent
    @ViewChild("yAxis", { static: true } )
    private yAxis: IgxNumericYAxisComponent
    @ViewChild("lineSeries1", { static: true } )
    private lineSeries1: IgxLineSeriesComponent
    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

ts

<div class="container vertical sample">
  <div class="aboveContent">
    <igx-toolbar
    name="toolbar"
    #toolbar
    [target]="chart"
    orientation="Vertical">
    </igx-toolbar>
  </div>
  <div class="container fill">
      <igx-data-chart
      isHorizontalZoomEnabled="true"
      name="chart"
      #chart>
          <igx-category-x-axis
          name="xAxis"
          #xAxis
          [dataSource]="countryRenewableElectricity"
          label="year">
          </igx-category-x-axis>
          <igx-numeric-y-axis
          name="yAxis"
          #yAxis
          title="TWh"
          labelLocation="OutsideRight">
          </igx-numeric-y-axis>
          <igx-line-series
          name="lineSeries1"
          #lineSeries1
          title="Electricity"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [dataSource]="countryRenewableElectricity"
          valueMemberPath="america">
          </igx-line-series>
      </igx-data-chart>
  </div>
</div>
html

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

색상 편집기

Angular 툴바에 사용자 정의 색상 편집기 도구를 추가할 수 있으며, 이 도구는 Command 이벤트와 함께 작동하여 응용 프로그램에 사용자 정의 스타일을 수행합니다.

<igx-toolbar
  name="toolbar"
  #toolbar>
      <igx-tool-action-color-editor
      title="Series Brush"
      name="colorEditorTool"
      #colorEditorTool>
      </igx-tool-action-color-editor>
</igx-toolbar>
html

<igc-toolbar
  name="toolbar"
  id="toolbar">
      <igc-tool-action-color-editor
      title="Series Brush Color"
      name="colorEditorTool"
      id="colorEditorTool">
      </igc-tool-action-color-editor>
</igc-toolbar>
ts

다음 예제에서는 색 편집기 도구를 사용하여 Angular 데이터 차트 시리즈 브러시의 스타일을 지정하는 방법을 보여 줍니다.

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

    public year: string;
    public europe: number;
    public china: number;
    public america: number;

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            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 { IgxToolbarModule, IgxToolActionComboModule, IgxToolActionColorEditorModule } from 'igniteui-angular-layouts';
import { IgxDataChartToolbarModule, IgxDataLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCategoryModule, IgxDataChartCoreModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxToolbarModule,
    IgxToolActionComboModule,
    IgxToolActionColorEditorModule,
    IgxDataChartToolbarModule,
    IgxDataLegendModule,
    IgxNumberAbbreviatorModule,
    IgxDataChartCategoryModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryModule,
    IgxDataChartAnnotationModule,
    IgxDataChartInteractivityModule,
    IgxDataChartAnnotationModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
ts

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxToolCommandEventArgs } from 'igniteui-angular-layouts';
import { IgxDataChartComponent, IgxSeriesComponent } from 'igniteui-angular-charts';
import { IgxToolbarComponent, IgxToolActionColorEditorComponent } from 'igniteui-angular-layouts';
import { IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent } 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("toolbar", { static: true } )
    private toolbar: IgxToolbarComponent
    @ViewChild("colorEditorTool", { static: true } )
    private colorEditorTool: IgxToolActionColorEditorComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxDataChartComponent
    @ViewChild("xAxis", { static: true } )
    private xAxis: IgxCategoryXAxisComponent
    @ViewChild("yAxis", { static: true } )
    private yAxis: IgxNumericYAxisComponent
    @ViewChild("lineSeries1", { static: true } )
    private lineSeries1: IgxLineSeriesComponent
    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

    public colorEditorToggleSeriesBrush({ sender, args }: { sender: any, args: IgxToolCommandEventArgs }): void {
        var target = this.chart;
        var color = args.command.argumentsList[0].value;

        switch (args.command.commandId)
        {
            case "ToggleSeriesBrush":
                let series = target.contentSeries.first as IgxSeriesComponent;
                series.brush = color;
            break;
        }
    }

}

ts

<div class="container vertical sample">
  <div class="aboveContentSplit">
    <div class="aboveContentLeftContainer">
      <igx-toolbar
      name="toolbar"
      #toolbar
      [target]="chart"
      (onCommand)="this.colorEditorToggleSeriesBrush($event)">
          <igx-tool-action-color-editor
          title="Series Brush"
          name="colorEditorTool"
          #colorEditorTool
          commandId="ToggleSeriesBrush">
          </igx-tool-action-color-editor>
      </igx-toolbar>
    </div>
    <div class="aboveContentRightContainer">
      <!-- insert aboveContentRight -->
      <!-- end aboveContentRight -->
    </div>
  </div>
  <div class="container fill">
      <igx-data-chart
      isHorizontalZoomEnabled="true"
      name="chart"
      #chart>
          <igx-category-x-axis
          name="xAxis"
          #xAxis
          [dataSource]="countryRenewableElectricity"
          label="year">
          </igx-category-x-axis>
          <igx-numeric-y-axis
          name="yAxis"
          #yAxis
          title="TWh"
          labelLocation="OutsideRight">
          </igx-numeric-y-axis>
          <igx-line-series
          name="lineSeries1"
          #lineSeries1
          title="Electricity"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [dataSource]="countryRenewableElectricity"
          valueMemberPath="america"
          markerType="None">
          </igx-line-series>
      </igx-data-chart>
  </div>
</div>
html

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.aboveContentSplit {
    display: flex;
    flex-direction: row;
}
.aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-end;
}
.aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: flex-end;
}
scss

Dependencies

Usage

Tool Actions

Angular Data Chart Integration

SVG Icons

Data URL Icons

Vertical Orientation

색상 편집기

API References

Additional Resources

테마

Angular Toolbar Overview

Angular Toolbar Example

Dependencies

Usage

Tool Actions

Angular Data Chart Integration

SVG Icons

Data URL Icons

Vertical Orientation

색상 편집기

API References

Additional Resources

테마