Web Components 축 레이아웃

모든 Ignite UI for Web Components 차트에는 위치와 같은 많은 축 레이아웃 옵션을 구성하는 옵션과 계열 간에 축을 공유하거나 동일한 차트에 여러 축을 포함할 수 있는 기능이 포함되어 있습니다. 이러한 기능은 아래 예에 나와 있습니다.

the following examples can be applied to IgcCategoryChartComponent as well as IgcFinancialChartComponent controls.

Axis Locations Example

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

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

EXAMPLE

DATA

TS

HTML

CSS

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 { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcLegendModule,
    IgcCategoryChartModule
);

export class Sample {

    private legend: IgcLegendComponent
    private propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private yAxisLabelLocation: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var yAxisLabelLocation = this.yAxisLabelLocation = document.getElementById('YAxisLabelLocation') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.chart;
            chart.dataSource = this.countryRenewableElectricity;
            chart.legend = this.legend;
        }
        this._bind();
    }

    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;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options vertical">
        <igc-property-editor-panel

        description-type="CategoryChart"
        is-horizontal="true"
        is-wrapping-enabled="false"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            property-path="YAxisLabelLocation"
            name="YAxisLabelLocation"
            id="YAxisLabelLocation"
            label="Y Axis - Label Location"
            primitive-value="OutsideRight">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Renewable Electricity Generated
    </div>

    <div class="legend">
        <igc-legend
        name="legend"
        id="legend"
        orientation="Horizontal">
        </igc-legend>
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        computed-plot-area-margin-mode="Series"
        included-properties="year, europe, china, america"
        chart-type="Line"
        y-axis-title="Labels Location"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        x-axis-interval="1"
        y-axis-label-location="OutsideRight">
        </igc-category-chart>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

Axis Advanced Scenarios

고급 축 레이아웃 시나리오의 경우 Web Components 데이터 차트 사용하여 축을 공유하거나, 동일한 그림 영역에 여러 y축 및/또는 x축을 추가하거나, 특정 값에서 축을 교차할 수도 있습니다. 다음 예제에서는 이러한 기능을 IgcDataChartComponent 사용하는 방법을 보여 줍니다.

Axis Sharing Example

Web Components IgcDataChartComponent의 동일한 플롯 영역에서 여러 축을 공유하고 추가할 수 있습니다. share IgcTimeXAxisComponent 및 add multiple IgcNumericYAxisComponent을 사용하여 광범위한 값(예: 주가 및 주식 거래량)을 가진 많은 데이터 원본을 그리는 것이 일반적인 시나리오입니다.

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

EXAMPLE

DATA

TS

HTML

CSS

export class SharedAxisFinancialData {

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

        if (items === undefined) {
            items = 400;
        }

        const today = new Date();
        const end = new Date(today.getFullYear(), today.getMonth(), today.getDay());
        let time = this.addDays(end, -items);

        const data: any[] = [];
        for (let i = 0; i < items; i++) {
            const date = time.toDateString();
            const label = this.getShortDate(time, false);
            // adding new data item
            data.push({"Time": time, "Date": date, "Label": label, "Close": c, "Open": o, "High": h, "Low": l, "Volume": v});
            // generating new values
            const mod = Math.random() - 0.49;
            o = Math.round(o + (mod * 20));
            o = Math.max(o, 500);
            o = Math.min(o, 675);

            v = Math.round(v + (mod * 500));
            h = Math.round(o + (Math.random() * 5));
            l = Math.round(o - (Math.random() * 5));
            c = Math.round(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 getShortDate(dt: Date, showYear: boolean): string {
        const months = [
            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ];
        const ind = dt.getMonth();
        const day = dt.getDay() + 1;
        let label = months[ind] + " " + day;
        if (showYear) {
            label += " " +  dt.getFullYear();
        }
        return label;
    }
}
tsコピー

// data chart's modules:
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcNumberAbbreviatorModule } from 'igniteui-webcomponents-charts';
// series' modules:
import { IgcFinancialPriceSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcColumnSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { SharedAxisFinancialData } from './SharedAxisFinancialData';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartInteractivityModule,
    IgcFinancialPriceSeriesModule,
    IgcNumberAbbreviatorModule,
    IgcColumnSeriesModule
);

export class DataChartAxisSharing {

    private chart: IgcDataChartComponent;

    constructor() {

        this.chart = document.getElementById('chart') as IgcDataChartComponent;
        this.chart.dataSource = this.getData();
    }

    getData(): any[] {
        const data = SharedAxisFinancialData.create();
        return data;
    }
}

new DataChartAxisSharing();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartAxisSharing</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <igc-data-chart id="chart" width="100%" height="100%"
    is-horizontal-zoom-enabled="true"
    is-vertical-zoom-enabled="true">
        <igc-category-x-axis name="xAxisShared" label="Label"></igc-category-x-axis>
        <igc-numeric-y-axis  name="yAxisRight" label-location="OutsideRight"
        minimum-value="400" title="Stock Price ($)"
        maximum-value="700">
        </igc-numeric-y-axis>

        <igc-numeric-y-axis name="yAxisLeft" label-location="OutsideLeft"
        minimum-value="5000" title="Trade Volume"
        maximum-value="45000"
        major-stroke-thickness="0"
        abbreviate-large-numbers="true">
        </igc-numeric-y-axis>

        <igc-column-series
        name="volumeSeries"
        x-axis-name="xAxisShared"
        y-axis-name="yAxisLeft"
        value-member-path="Volume">
        </igc-column-series>

        <igc-financial-price-series
        name="stockSeries"
        x-axis-name="xAxisShared"
        y-axis-name="yAxisRight"
        display-type="Candlestick"
        high-member-path="High"
        low-member-path="Low"
        close-member-path="Close"
        open-member-path="Open">
        </igc-financial-price-series>
    </igc-data-chart>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Axis Crossing Example

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

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

EXAMPLE

TS

HTML

CSS

// data chart's modules:
import { IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule,
         IgcDataChartComponent, IgcLegendComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartScatterModule,
    IgcDataChartScatterCoreModule,
    IgcDataChartInteractivityModule,
);

export class DataChartAxisCrossing {

    private chart: IgcDataChartComponent;
    private xAxis: IgcNumericXAxisComponent;
    private yAxis: IgcNumericYAxisComponent;
    private xAxisCrossLabel: HTMLLabelElement;
    private yAxisCrossLabel: HTMLLabelElement;

    private data: any[] = [];

    constructor() {
        this.onXAxisSliderChanged = this.onXAxisSliderChanged.bind(this);
        this.onYAxisSliderChanged = this.onYAxisSliderChanged.bind(this);

        this.initData();

        this.chart = document.getElementById('chart') as IgcDataChartComponent;

        this.xAxis = document.getElementById("xAxis") as IgcNumericXAxisComponent;
        this.yAxis = document.getElementById("yAxis") as IgcNumericYAxisComponent;

        this.xAxis.crossingAxis = this.yAxis;
        this.yAxis.crossingAxis = this.xAxis;

        this.xAxisCrossLabel = document.getElementById("xAxisCrossLabel") as HTMLLabelElement;
        this.yAxisCrossLabel = document.getElementById("yAxisCrossLabel") as HTMLLabelElement;

        const xAxisSlider = document.getElementById("xAxisCrossingSlider") as HTMLInputElement;
        xAxisSlider.addEventListener("input", this.onXAxisSliderChanged);

        const yAxisSlider = document.getElementById("yAxisCrossingSlider") as HTMLInputElement;
        yAxisSlider.addEventListener("input", this.onYAxisSliderChanged);

        this.chart.dataSource = this.data;
    }

    public initData() {

        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.data.push({ X: i, sinValue: sin, cosValue: cos });
        }
    }

    public onXAxisSliderChanged(e: any) {
        const value = e.target.value;
        this.yAxis.crossingValue = value;
        this.xAxisCrossLabel.textContent = value;
    }

    public onYAxisSliderChanged(e: any) {
        const value = e.target.value;
        this.xAxis.crossingValue = value;
        this.yAxisCrossLabel.textContent = value;
    }
}

new DataChartAxisCrossing();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartAxisCrossing</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options horizontal">
      <label class="option-label">X-Axis Crossing Value: </label>
      <label class="options-value" id="xAxisCrossLabel">0</label>
      <input class="options-slider" id="xAxisCrossingSlider" type="range" min="-360" max="360" step="10" value="0"/>
      <label class="option-label">Y-Axis Crossing Value: </label>
      <label class="options-value" id="yAxisCrossLabel">0</label>
      <input class="options-slider" id="yAxisCrossingSlider" type="range" min="-1.25" max="1.25" step="0.125" value="0"/>
    </div>

    <div class="container"  style="height: calc(100% - 3rem)">
        <igc-data-chart id="chart" width="100%" height="100%" is-horizontal-zoom-enabled="true"
                        is-vertical-zoom-enabled="true" plot-area-margin-bottom="60" plot-area-margin-top="60"
                        plot-area-margin-left="30" plot-area-margin-right="30">
            <igc-numeric-x-axis id="xAxis" name="xAxis" interval="40" minimum-value="-360" maximum-value="360"
                                label-location="InsideBottom" label-top-margin="10" crossing-axis-name="yAxis"
                                crossing-value="0" stroke-thickness="1" stroke="Black">
            </igc-numeric-x-axis>
            <igc-numeric-y-axis id="yAxis" name="yAxis" minimum-value="-1.25" maximum-value="1.25" interval="0.25"
                                label-location="InsideLeft" label-right-margin="10" crossing-axis-name="xAxis"
                                crossing-value="0" stroke-thickness="1" stroke="Black">
            </igc-numeric-y-axis>

            <igc-scatter-spline-series x-axis-name="xAxis" y-axis-name="yAxis" marker-type="Circle" x-member-path="X" y-member-path="sinValue"></igc-scatter-spline-series>
            <igc-scatter-spline-series x-axis-name="xAxis" y-axis-name="yAxis" marker-type="Circle" x-member-path="X" y-member-path="cosValue"></igc-scatter-spline-series>
        </igc-data-chart>
    <div>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Additional Resources

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

• 축 눈금선
• 축 옵션

API References

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

IgcDataChartComponent	IgcCategoryChartComponent
Axes ➔ IgcNumericYAxisComponent ➔ crossingAxis	없음
Axes ➔ IgcNumericYAxisComponent ➔ crossingValue	없음
Axes ➔ IgcNumericXAxisComponent ➔ isInverted	xAxisInverted
Axes ➔ IgcNumericYAxisComponent ➔ isInverted	yAxisInverted
Axes ➔ IgcNumericYAxisComponent ➔ LabelLocation	yAxisLabelLocation
Axes ➔ IgcNumericXAxisComponent ➔ LabelLocation	xAxisLabelLocation
Axes ➔ IgcNumericYAxisComponent ➔ LabelHorizontalAlignment	yAxisLabelHorizontalAlignment
Axes ➔ IgcNumericXAxisComponent ➔ LabelVerticalAlignment	xAxisLabelVerticalAlignment
Axes ➔ IgcNumericYAxisComponent ➔ LabelVisibility	yAxisLabelVisibility
Axes ➔ IgcNumericXAxisComponent ➔ LabelVisibility	xAxisLabelVisibility