Angular 레이아웃

모든 Ignite UI for Angular 차트에는 위치와 같은 많은 축 레이아웃 옵션을 구성하는 옵션과 시리즈 간에 축을 공유하거나 동일한 차트에 여러 축을 두는 기능이 포함되어 있습니다. 이러한 기능은 아래에 제공된 예에서 설명됩니다.

다음 예는 IgxCategoryChartComponent 및 IgxFinancialChartComponent 컨트롤에 적용될 수 있습니다.

축 위치 예

모든 축에 대해 차트 플롯 영역과 관련하여 축 위치를 지정할 수 있습니다. Angular 차트의 xAxisLabelLocation 속성을 사용하면 x축 선과 레이블을 플롯 영역 위나 아래에 배치할 수 있습니다. 마찬가지로 yAxisLabelLocation 속성을 사용하여 y축을 플롯 영역의 왼쪽이나 오른쪽에 배치할 수 있습니다.

다음 예에서는 2009년 이후 생산된 재생 가능 전기량을 선형 차트로 표시합니다. 차트 플롯 영역 내부 또는 외부의 왼쪽 또는 오른쪽에 레이블이 배치될 때 축이 어떻게 보이는지 시각화할 수 있도록 yAxisLabelLocation 구성할 수 있는 드롭다운이 있습니다.

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 { 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 { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';

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("legend", { static: true } )
    private legend: IgxLegendComponent
    @ViewChild("propertyEditorPanel1", { static: true } )
    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
    @ViewChild("yAxisLabelLocation", { static: true } )
    private yAxisLabelLocation: IgxPropertyEditorPropertyDescriptionComponent
    @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;
    }

    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
      [componentRenderer]="renderer"
      [target]="chart"
      descriptionType="CategoryChart"
      isHorizontal="true"
      isWrappingEnabled="false"
      name="propertyEditorPanel1"
      #propertyEditorPanel1>
          <igx-property-editor-property-description
          propertyPath="YAxisLabelLocation"
          name="YAxisLabelLocation"
          #yAxisLabelLocation
          label="Y Axis - Label Location"
          primitiveValue="OutsideRight">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="legend-title">
      Renewable Electricity Generated
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      computedPlotAreaMarginMode="Series"
      [dataSource]="countryRenewableElectricity"
      includedProperties="year, europe, china, america"
      [legend]="legend"
      chartType="Line"
      yAxisTitle="Labels Location"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      xAxisInterval="1"
      yAxisLabelLocation="OutsideRight">
      </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 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

축 고급 시나리오

더욱 고급 축 레이아웃 시나리오의 경우 Angular 데이터 차트 사용하여 축을 공유하고, 동일한 플롯 영역에 여러 y축 및/또는 x축을 추가하거나, 심지어 특정 값에서 축을 교차할 수 있습니다. 다음 예에서는 IgxDataChartComponent의 이러한 기능을 사용하는 방법을 보여줍니다.

Angular IgxDataChartComponent의 동일한 플롯 영역에서 여러 축을 공유하고 추가할 수 있습니다. IgxTimeXAxisComponent 공유하고 여러 IgxNumericYAxisComponent 추가하여 값 범위가 넓은(예: 주가 및 주식 거래량) 여러 데이터 소스를 플롯하는 것이 일반적인 시나리오입니다.

다음 예에서는 주식형 차트와 기둥 차트가 표시된 주식 가격 및 거래량 차트를 보여줍니다. 이 경우 왼쪽의 Y축은 기둥 차트에서 사용되고 오른쪽의 Y축은 주식형 차트에서 사용되며 X축은 두 축이 공유됩니다.

import { Injectable } from "@angular/core";

@Injectable()
export class SampleFinancialData {

    public static create(): any[] {
        // initial values
        let v = 10000;
        let o = 500;
        let h = o + (Math.random() * 5);
        let l = o - (Math.random() * 5);
        let c = l + (Math.random() * (h - l));

        const items = 100;
        const end = new Date(2020, 11, 1);
        let time = this.addDays(end, -items);

        const data: any[] = [];
        for (let i = 0; i < items; i++) {
            const date = time.toDateString();
            // const date = this.getDate(time);
            // adding new data item
            data.push({ Time: time, Date: date, Close: c, Open: o, High: h, Low: l, Volume: v });
            // generating new values
            const mod = Math.random() - 0.4;
            o = o + (mod * 5 * 2);
            v = v + (mod * 5 * 100);
            h = o + (Math.random() * 5);
            l = o - (Math.random() * 5);
            c = l + (Math.random() * (h - l));
            time = this.addDays(time, 1);
        }
        return data;
    }

    public static addDays(dt: Date, days: number): Date {
        return new Date(dt.getTime() + days * 24 * 60 * 60 * 1000);
    }
    public static getDate(dt: Date): string {
        return dt.getDay() + "/" + dt.getMonth() + "/" + dt.getFullYear();
    }
}
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 { IgxNumericXAxisModule, IgxNumericYAxisModule, IgxMoneyFlowIndexIndicatorModule, IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxFinancialPriceSeriesModule } from "igniteui-angular-charts";
import { SampleFinancialData } from "./SampleFinancialData";


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

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxNumericXAxisModule,
    IgxNumericYAxisModule,
    IgxMoneyFlowIndexIndicatorModule,
    IgxLegendModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryModule,
    IgxFinancialPriceSeriesModule
],
  providers: [SampleFinancialData],
schemas: []
})
export class AppModule {}
ts

import { Component, OnInit } from "@angular/core";
import { SampleFinancialData } from "./SampleFinancialData";

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

    public data: any[] = SampleFinancialData.create();
    constructor() { }

    public ngOnInit() {
    }

}
ts

<div class="container vertical">
        <igx-data-chart
            width="100%"
            height="100%"
            [dataSource]="data">

            <igx-category-x-axis #xAxisShared label="Date" gap=0.75></igx-category-x-axis>
            <igx-numeric-y-axis #yAxisRight
                labelLocation="OutsideRight"
                title="Stock Price"
                minimumValue="400"
                maximumValue="700">
            </igx-numeric-y-axis>
            <igx-numeric-y-axis #yAxisLeft
                labelLocation="OutsideLeft"
                title="Trade Volume"
                minimumValue="5000"
                maximumValue="45000"
                abbreviateLargeNumbers=true
                majorStrokeThickness="0">
            </igx-numeric-y-axis>

            <igx-column-series [xAxis]="xAxisShared"
                [yAxis]="yAxisLeft"
                valueMemberPath="Volume"
                showDefaultTooltip=true
                title="Trade Volume">
            </igx-column-series>

            <igx-financial-price-series
                [xAxis]="xAxisShared"
                [yAxis]="yAxisRight"
                displayType="Candlestick"
                highMemberPath="High"
                lowMemberPath="Low"
                closeMemberPath="Close"
                openMemberPath="Open"
                volumeMemberPath="Volume"></igx-financial-price-series>
        </igx-data-chart>
</div>
html

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

축 교차 예

Angular IgxDataChartComponent는 축을 플롯 영역 외부에 배치하는 것 외에도 축을 플롯 영역 내부에 배치하고 특정 값에서 교차하도록 하는 옵션도 제공합니다. 예를 들어, x축과 y축 모두에 crossingAxis 및 crossingValue 속성을 설정하여 삼각 차트를 만들어 축 선과 축 레이블을 (0, 0) 원점에서 교차하도록 렌더링할 수 있습니다.

다음 예에서는 X축과 Y축이 (0, 0) 원점에서 서로 교차하는 분산 스플라인 차트로 표현되는 Sin 및 Cos 파동을 보여줍니다.

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


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

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

import { Component } from "@angular/core";

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

    public SinData: any[];
    public CosData: any[];

    public YAxisCrossingValue : number = 0;
    public XAxisCrossingValue : number = 0;

    constructor() {

      this.SinData= [];
      this.CosData= [];

        for (let i = -360; i <= 360; i+=10)
        {
            const radians = (i * Math.PI) / 180;
            const sin = Math.sin(radians);
            const cos = Math.cos(radians);

            this.SinData.push( { X : i, Y : sin });
            this.CosData.push( { X : i, Y : cos });
        }
    }

    public OnXAxisCrossingValueChanged(e : any) {
        this.XAxisCrossingValue = e.target.value;
    }

    public OnYAxisCrossingValueChanged(e : any) {
        this.YAxisCrossingValue = e.target.value;
    }
}
ts

<div class="container vertical">
    <div class="options horizontal">

        <label>X Axis Crossing Value:  </label>
        <label class="options-value" ><span [textContent]="XAxisCrossingValue" ></span></label>
        <input type="range" min="-1.25" max="1.25" step="0.25" value="0" (input)="OnXAxisCrossingValueChanged($event)" />

        <label>Y Axis Crossing Value:  </label>
        <label class="options-value" ><span [textContent]="YAxisCrossingValue" ></span></label>
        <input type="range" min="-360" max="360" step="40" value="0" (input)="OnYAxisCrossingValueChanged($event)" />
    </div>

    <div class="container">
        <igx-data-chart isHorizontalZoomEnabled=true isVerticalZoomEnabled=true
            width="100%" height="100%" [dataSource]="SinData" >
            <igx-numeric-x-axis #xAxis interval="40"
                minimumValue="-360"
                maximumValue="360"
                labelLocation="InsideBottom"
                [crossingAxis]="yAxis"
                [crossingValue]="XAxisCrossingValue">
            </igx-numeric-x-axis>
            <igx-numeric-y-axis #yAxis
                minimumValue="-1.25"
                maximumValue="1.25"
                interval="0.25"
                labelLocation="InsideLeft"
                [crossingAxis]="xAxis"
                [crossingValue]="YAxisCrossingValue" >
            </igx-numeric-y-axis>

            <igx-scatter-spline-series markerType="Circle"
                [dataSource]="SinData"
                [xAxis]="xAxis"
                [yAxis]="yAxis"
                xMemberPath="X"
                yMemberPath="Y" >
            </igx-scatter-spline-series>

            <igx-scatter-spline-series markerType="Circle"
                [dataSource]="CosData"
                [xAxis]="xAxis"
                [yAxis]="yAxis"
                xMemberPath="X"
                yMemberPath="Y">
            </igx-scatter-spline-series>
        </igx-data-chart>

</div>
html

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

추가 리소스

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

API 참조

다음은 위 섹션에서 언급된 API 멤버 목록입니다. 위 섹션의 d:

`IgxDataChartComponent`	`IgxCategoryChartComponent`
`Axes` ➔ `IgxNumericYAxisComponent` ➔ `crossingAxis`	없음
`Axes` ➔ `IgxNumericYAxisComponent` ➔ `crossingValue`	없음
`Axes` ➔ `IgxNumericXAxisComponent` ➔ `isInverted`	`xAxisInverted`
`Axes` ➔ `IgxNumericYAxisComponent` ➔ `isInverted`	`yAxisInverted`
`Axes` ➔ `IgxNumericYAxisComponent` ➔ `LabelLocation`	`yAxisLabelLocation`
`Axes` ➔ `IgxNumericXAxisComponent` ➔ `LabelLocation`	`xAxisLabelLocation`
`Axes` ➔ `IgxNumericYAxisComponent` ➔ `LabelHorizontalAlignment`	`yAxisLabelHorizontalAlignment`
`Axes` ➔ `IgxNumericXAxisComponent` ➔ `LabelVerticalAlignment`	`xAxisLabelVerticalAlignment`
`Axes` ➔ `IgxNumericYAxisComponent` ➔ `LabelVisibility`	`yAxisLabelVisibility`
`Axes` ➔ `IgxNumericXAxisComponent` ➔ `LabelVisibility`	`xAxisLabelVisibility`