Web Components 선형 차트

Ignite UI for Web Components 선형 차트 또는 라인 그래프는 시간 경과에 따라 하나 이상의 수량의 직선 세그먼트로 연결된 점으로 표현된 연속 데이터 값을 보여주는 범주 차트 유형입니다. 이는 종종 추세를 보여주고 비교 분석을 수행하는 데 사용됩니다. Y축(왼쪽 레이블)은 숫자 값을 보여주고 X축(하단 레이블)은 시계열 또는 비교 범주를 보여줍니다. 비교할 하나 이상의 데이터 세트를 포함할 수 있으며, 이는 차트에서 여러 줄로 렌더링됩니다.

Web Components 선형 차트 예

에서 Web Components 선형 차트 만들 수 있습니다. IgcCategoryChartComponent 데이터를 바인딩하여 제어 ItemsSource 속성 및 설정 chartType 속성을 Line enum, 아래 예와 같이.

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 { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcCategoryChartModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            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;
    }

}

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="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"
        chart-type="Line"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        included-properties="year, europe, china, america"
        y-axis-title="TWh"
        y-axis-title-left-margin="10"
        y-axis-title-right-margin="5"
        y-axis-label-left-margin="0"
        computed-plot-area-margin-mode="Series">
        </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

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

선형 차트 권장사항

Web Components 라인 차트가 귀하의 프로젝트에 적합할까요?

영역 차트와 달리 선 차트는 X축(하단 축)과 선 사이의 영역을 채우지 않습니다.
Web Components 선형 차트는 데이터 포인트를 연결하는 선에 스플라인 보간 및 평활화가 없어 데이터를 더 잘 표현할 수 있는 점을 제외하고는 모든 면에서 Web Components 스플라인 차트와 동일합니다.

선형 차트 데이터를 기반으로 한 여러 변형 또는 데이터로 올바른 스토리를 전달하려는 방법이 포함되어 있습니다. 여기에는 다음이 포함됩니다.

계층형 꺾은 선형 차트
누적 선형 차트
계단형 꺾은 선형 차트
극선 선형 차트
누적 100 선형 차트

선형 차트 사용 사례

선형 차트 선택하는 데는 몇 가지 일반적인 사용 사례가 있습니다.

패닝, 확대/축소, 드릴다운과 같은 차트 상호 작용에 잘 맞는 대용량 데이터 세트를 보유하세요.
시간에 따른 추세를 비교해야 합니다.
2개 이상의 데이터 계열 간의 차이점을 표시하고 싶습니다.
개별 범주의 누적된 부분 대 전체 비교를 표시하려고 합니다.
비교 분석을 위해 하나 이상의 범주에 대한 데이터 추세를 표시해야 합니다.
상세한 시계열 데이터를 시각화해야 합니다.

선형 차트 모범 사례:

데이터 비교가 정확하도록 항상 Y축(왼쪽 또는 오른쪽 축)을 0에서 시작합니다.
시계열 데이터를 왼쪽에서 오른쪽으로 정렬합니다.
일련의 데이터를 표시하려면 실선과 같은 시각적 속성을 사용하세요.

선형 차트 사용하지 말아야 할 경우

7개 또는 10개 이상의 데이터 계열이 있습니다. 당신의 목표는 차트를 읽을 수 있는지 확인하는 것입니다.
시계열 데이터는 유사한 값(동일 기간의 데이터)을 가지므로 중복된 선을 구별할 수 없습니다.

선형 차트 데이터 구조:

데이터 소스는 데이터 항목의 배열 또는 목록이어야 합니다(단일 계열의 경우).
데이터 소스는 배열의 배열 또는 목록의 목록(여러 계열의 경우)이어야 합니다.
데이터 소스에는 데이터 항목이 하나 이상 포함되어 있어야 합니다.
모든 데이터 항목에는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어야 합니다.
모든 데이터 항목에는 숫자 데이터 열이 하나 이상 포함되어야 합니다.

단일 시리즈가 있는 Web Components 선형 차트

Web Components 선형 차트 종종 시간에 따른 값의 변화를 보여주는 데 사용됩니다. 예를 들어 아래 예에서 보듯이 2009년부터 10년간 생산된 재생 에너지의 양을 보여주는 것입니다.

아래 예제와 같이 데이터를 바인딩하고 속성을 로 설정하여 chartType 컨트롤에서 IgcCategoryChartComponent 이러한 유형의 차트를 만들 수 있습니다. Line

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 { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcCategoryChartModule
);

export class Sample {

    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            chart.dataSource = this.countryRenewableElectricity;
        }
        this._bind();
    }

    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

}

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="legend-title">
        Renewable Electricity Generated
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Line"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        included-properties="year, europe"
        y-axis-title="TWh"
        y-axis-title-left-margin="10"
        y-axis-title-right-margin="5"
        y-axis-label-left-margin="0"
        computed-plot-area-margin-mode="Series">
        </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

여러 시리즈가 있는 Web Components 선형 차트

Web Components 선형 차트 사용하면 여러 시리즈를 결합하고 비교하거나 시간이 지남에 따라 어떻게 변하는지 확인할 수 있으므로 이를 달성하는 것이 얼마나 쉬운지 살펴보겠습니다. 중국과 미국에 대한 데이터가 포함된 데이터 소스에 바인딩하기만 하면 라인 차트가 추가 데이터에 맞게 자동으로 업데이트됩니다.

아래 예제와 같이 데이터를 바인딩하고 속성을 로 설정하여 chartType 컨트롤에서 IgcCategoryChartComponent 이러한 유형의 차트를 만들 수 있습니다. Line

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 { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcCategoryChartModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            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;
    }

}

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="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"
        chart-type="Line"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        included-properties="year, europe, china, america"
        y-axis-title="TWh"
        y-axis-title-left-margin="10"
        y-axis-title-right-margin="5"
        y-axis-label-left-margin="0"
        computed-plot-area-margin-mode="Series">
        </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

라이브 데이터가 포함된 Web Components 선형 차트

Web Components 선형 차트는 수백만 개에 달하는 데이터 포인트에 달하는 엄청난 양의 데이터를 처리하고 다음 데모에서 보여주듯이 수 밀리초마다 이를 업데이트할 수 있습니다.

이 예에서, 우리는 당신이 선택한 간격으로 라이브 데이터를 Web Components 선형 차트로 스트리밍합니다. 데이터 포인트를 5,000에서 100만까지 설정하고 차트를 렌더링하는 장치에 따라 스케일을 최적화하도록 차트를 업데이트할 수 있습니다.

아래 예제와 같이 데이터를 바인딩하고 속성을 로 설정하여 chartType 컨트롤에서 IgcCategoryChartComponent 이러한 유형의 차트를 만들 수 있습니다. Line



export class CategoryChartSharedData {

    public static generateItems(startValue: number, maxPoints: number, useShortLabels?: boolean): any[] {

        const data: any[] = [];
        let value = startValue;
        for (let i = 0; i <= maxPoints; i++) {
            value += Math.random() * 4.0 - 2.0;
            const v = Math.round(value);
            let l = i.toString();
            if (useShortLabels) {
                l = this.toShortString(i);
            }
            data.push({ Label: l, Value: v });
        }
        return data;
    }

    public static getTemperatures(startValue: number, startYear: number, endYear: number): any[] {
        const data: any[] = [];
        let value = startValue;
        for (let i = startYear; i <= endYear; i++) {
            value += (Math.random() - 0.5) * 0.5;
            const v = Math.abs(Math.round(value * 10) / 10);
            data.push({ Label: i.toString(), Value: v });
        }
        return data;
    }

    public static getLastItem(array: any[]): any {
        if (array.length === 0) {
            return null;
        }
        return array[array.length - 1];
    }

    public static getNewItem(array: any[], index: number): any {
        const lastItem = this.getLastItem(array);
        const newValue = lastItem.Value + Math.random() * 4.0 - 2.0;
        return { Label: index.toString(), Value: newValue };
    }

    public static toShortString(largeValue: number): string {
        let roundValue: number;

        if (largeValue >= 1000000) {
            roundValue = Math.round(largeValue / 100000) / 10;
            return roundValue + "m";
        }
        if (largeValue >= 1000) {
            roundValue = Math.round(largeValue / 100) / 10;
            return roundValue + "k";
        }

        roundValue = Math.round(largeValue);
        return roundValue + "";
    }

    public static addDays(date: Date, days: number): Date {
        date.setDate(date.getDate() + days);
        return date;
    }
}
ts

import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { CategoryChartSharedData } from './CategoryChartSharedData';

ModuleManager.register(IgcCategoryChartModule);

export class CategoryChartHighFrequency {

    private chart: IgcCategoryChartComponent;
    public dataIndex: number = 0;
    public dataPoints: number = 100000;
    public data: any[] = [];

    public refreshMilliseconds: number = 10;
    public interval: number = -1;
    private dataInfoLabel: HTMLLabelElement;
    private refreshInfoLabel: HTMLLabelElement;
    private timerTickButton : HTMLButtonElement;
    private shouldTick: boolean = false;

    constructor() {

        this.onRefreshFrequencyChanged = this.onRefreshFrequencyChanged.bind(this);
        this.onDataGenerateClick = this.onDataGenerateClick.bind(this);
        this.onTimerButtonClick = this.onTimerButtonClick.bind(this);
        this.onDataPointsChanged = this.onDataPointsChanged.bind(this);
        this.tick = this.tick.bind(this);

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

        this.data = CategoryChartSharedData.generateItems(100, this.dataPoints, false);

        this.chart.dataSource = this.data;
        this.onChartInit();

        let slider1 = document.getElementById('slider') as HTMLInputElement;
        slider1.value = this.dataPoints.toString();
        slider1!.addEventListener('change', this.onDataPointsChanged);

        this.refreshInfoLabel = document.getElementById('refreshInfoLabel') as HTMLLabelElement;
        this.refreshInfoLabel.textContent = (this.refreshMilliseconds / 1000).toFixed(3) + 's';

        let refreshSlider = document.getElementById('refreshSlider') as HTMLInputElement;
        refreshSlider.value = this.refreshMilliseconds.toString();
        refreshSlider!.addEventListener('change', this.onRefreshFrequencyChanged);

        this.dataInfoLabel = document.getElementById('dataInfoLabel') as HTMLLabelElement;
        this.dataInfoLabel.textContent = CategoryChartSharedData.toShortString(this.dataPoints);

        let dataGenerate1 = document.getElementById('dataGenerate') as HTMLInputElement;
        dataGenerate1!.addEventListener('click', this.onDataGenerateClick);

        this.timerTickButton = document.getElementById('timerButton') as HTMLButtonElement;
        this.timerTickButton!.addEventListener('click', this.onTimerButtonClick);
    }

    public componentWillUnmount() {
        if (this.interval >= 0) {
            window.clearInterval(this.interval);
            this.interval = -1;
        }
    }

    public onChartInit(): void {
        this.setupInterval();
    }

    public onDataGenerateClick() {

        this.data = CategoryChartSharedData.generateItems(100, this.dataPoints, false);
        this.dataIndex = this.data.length;

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.chart.dataSource = this.data;
    }

    public onTimerButtonClick() {
        this.shouldTick = !this.shouldTick;

        if (this.shouldTick) {
            this.timerTickButton.textContent = "Stop";
        }
        else {
            this.timerTickButton.textContent = "Start";
        }
    }

    public onDataPointsChanged = (e: any) => {

        let num: number = parseInt(e.target.value, 10);

        if (isNaN(num)) {
            num = 10000;
        }
        if (num < 10000) {
            num = 10000;
        }
        if (num > 1000000) {
            num = 1000000;
        }
        const info = CategoryChartSharedData.toShortString(num);
        this.dataInfoLabel.textContent = info;
        this.dataPoints = num;
    }

    public onRefreshFrequencyChanged = (e: any) => {
        let num: number = parseInt(e.target.value, 10);

        if (isNaN(num)) {
            num = 10;
        }
        if (num < 10) {
            num = 10;
        }
        if (num > 500) {
            num = 500;
        }
        this.refreshMilliseconds = num;
        this.refreshInfoLabel.textContent = (this.refreshMilliseconds / 1000).toFixed(3) + 's';
        this.setupInterval();
    }

    public setupInterval(): void {
        if (this.interval >= 0) {
            window.clearInterval(this.interval);
            this.interval = -1;
        }

        this.interval = window.setInterval(() => this.tick(),
            this.refreshMilliseconds);
    }

    public tick(): void {
        if (this.shouldTick) {
            this.dataIndex++;
            const oldItem = this.data[0];
            const newItem = CategoryChartSharedData.getNewItem(this.data, this.dataIndex);

            // updating data source and notifying category chart
            this.data.push(newItem);
            this.chart.notifyInsertItem(this.data, this.data.length - 1, newItem);
            this.data.shift();
            this.chart.notifyRemoveItem(this.data, 0, oldItem);
        }
    }
}

new CategoryChartHighFrequency();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>CategoryChartHighFrequency</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="options-label">Refresh: </label>
        <button id="timerButton">Start</button>
        <label class="options-value" id="refreshInfoLabel"></label>
        <input class="options-slider" id="refreshSlider" type="range" min="10" max="500"></input>
        <button class="options-button" id="dataGenerate">Generate</button>
        <label class="options-label">Points: </label>
        <label class="options-value" id="dataInfoLabel" >100000 </label>
        <input class="options-slider" id="slider" type="range" min="10000" max="1000000" step="1000" value="100000"></input>
    </div>

    <igc-category-chart id="chart"
        chart-type="Line"
        width="100%"
        height="calc(100% - 3rem)"
        y-axis-extent="60"
        x-axis-enhanced-interval-prefer-more-category-labels="false"
        should-consider-auto-rotation-for-initial-labels="false"
        should-auto-expand-margin-for-initial-labels="false"
        crosshairs-display-mode="None"
        auto-margin-and-angle-update-mode="None"
        marker-types="None" >
    </igc-category-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

Web Components 스타일링 선형 차트

차트가 설정되면 선 색상 변경, 범례 글꼴 모음 변경 및/또는 읽기 쉽도록 축 레이블 크기 늘리기와 같은 추가 스타일 사용자 정의를 수행할 수 있습니다.

아래 예제와 같이 데이터를 바인딩하고 속성을 로 설정하여 chartType 컨트롤에서 IgcCategoryChartComponent 이러한 유형의 차트를 만들 수 있습니다. Line

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 { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcCategoryChartModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            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;
    }

}

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="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"
        chart-type="Line"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        marker-brushes="rgba(238, 88, 121, 1) rgba(196, 196, 196, 1) rgba(154, 242, 228, 1)"
        marker-outlines="white"
        brushes="rgba(238, 88, 121, 1) rgba(196, 196, 196, 1) rgba(154, 242, 228, 1)"
        outlines="rgba(238, 88, 121, 1) rgba(196, 196, 196, 1) rgba(154, 242, 228, 1)"
        y-axis-title="TWh"
        y-axis-title-left-margin="10"
        y-axis-label-left-margin="0"
        thickness="2"
        computed-plot-area-margin-mode="Series">
        </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

IgcDataChartComponent 사용하고 계열에 dashArray 속성을 설정하여 IgcLineSeriesComponent 내에 점선을 만들 수도 있습니다. 이 속성은 줄에서 결과 대시의 길이를 설명하는 숫자 배열을 사용합니다.

다음 예에서는 IgcDataChartComponent의 IgcLineSeriesComponent에서 dashArray를 사용하는 방법을 보여줍니다.

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, items)));
        }
    }
}
ts

import { IgcLegendModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";

ModuleManager.register(
    IgcLegendModule,
    IgcDataChartCategoryModule,
    IgcDataChartInteractivityModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcDataChartComponent
    private xAxis: IgcCategoryXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private lineSeries1: IgcLineSeriesComponent
    private lineSeries2: IgcLineSeriesComponent
    private lineSeries3: IgcLineSeriesComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('Legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
        var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
        var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
        var lineSeries1 = this.lineSeries1 = document.getElementById('LineSeries1') as IgcLineSeriesComponent;
        var lineSeries2 = this.lineSeries2 = document.getElementById('LineSeries2') as IgcLineSeriesComponent;
        var lineSeries3 = this.lineSeries3 = document.getElementById('LineSeries3') as IgcLineSeriesComponent;

        this._bind = () => {
            chart.legend = this.legend;
            xAxis.dataSource = this.countryRenewableElectricity;
            lineSeries1.xAxis = this.xAxis;
            lineSeries1.yAxis = this.yAxis;
            lineSeries1.dataSource = this.countryRenewableElectricity;
            lineSeries2.xAxis = this.xAxis;
            lineSeries2.yAxis = this.yAxis;
            lineSeries2.dataSource = this.countryRenewableElectricity;
            lineSeries3.xAxis = this.xAxis;
            lineSeries3.yAxis = this.yAxis;
            lineSeries3.dataSource = this.countryRenewableElectricity;
        }
        this._bind();
    }

    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

}

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="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-data-chart
        name="chart"
        id="chart"
        computed-plot-area-margin-mode="Series">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label="year">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="yAxis"
            id="yAxis">
            </igc-numeric-y-axis>
            <igc-line-series
            name="LineSeries1"
            id="LineSeries1"
            title="Europe"
            marker-type="Circle"
            value-member-path="europe"
            show-default-tooltip="true"
            dash-array="2, 2">
            </igc-line-series>
            <igc-line-series
            name="LineSeries2"
            id="LineSeries2"
            title="China"
            marker-type="Circle"
            value-member-path="china"
            show-default-tooltip="true"
            dash-array="5, 5">
            </igc-line-series>
            <igc-line-series
            name="LineSeries3"
            id="LineSeries3"
            title="America"
            marker-type="Circle"
            value-member-path="america"
            show-default-tooltip="true"
            dash-array="10, 10">
            </igc-line-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

고급 유형의 선형 차트

다음 섹션에서는 IgcDataChartComponent 컨트롤 대신 간소화된 API IgcCategoryChartComponent 사용하여 만들 수 있는 고급 유형의 Web Components 선형 차트를 설명합니다.

Web Components 스택 선형 차트

누적 선형 차트 지역 간 몇 년 동안 생산된 재생 가능 전력량과 같이 시간에 따른 값의 변화를 표시하는 데 자주 사용됩니다. 아래 예와 같이 데이터를 IgcStackedLineSeriesComponent에 바인딩하여 IgcDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

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

    public Year: string;
    public Asia: number;
    public Africa: number;
    public Europe: number;
    public NorthAmerica: number;
    public SouthAmerica: number;
    public Oceania: number;

}
export class ContinentsBirthRate extends Array<ContinentsBirthRateItem> {
    public constructor(items: Array<ContinentsBirthRateItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new ContinentsBirthRateItem(
                {
                    Year: `1950`,
                    Asia: 62,
                    Africa: 13,
                    Europe: 10,
                    NorthAmerica: 4,
                    SouthAmerica: 8,
                    Oceania: 1
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1960`,
                    Asia: 68,
                    Africa: 12,
                    Europe: 15,
                    NorthAmerica: 4,
                    SouthAmerica: 9,
                    Oceania: 2
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1970`,
                    Asia: 80,
                    Africa: 17,
                    Europe: 11,
                    NorthAmerica: 3,
                    SouthAmerica: 9,
                    Oceania: 1
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1980`,
                    Asia: 77,
                    Africa: 21,
                    Europe: 12,
                    NorthAmerica: 3,
                    SouthAmerica: 10,
                    Oceania: 2
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1990`,
                    Asia: 87,
                    Africa: 24,
                    Europe: 9,
                    NorthAmerica: 3,
                    SouthAmerica: 10,
                    Oceania: 1
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `2000`,
                    Asia: 79,
                    Africa: 28,
                    Europe: 8,
                    NorthAmerica: 4,
                    SouthAmerica: 9,
                    Oceania: 3
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `2010`,
                    Asia: 78,
                    Africa: 35,
                    Europe: 10,
                    NorthAmerica: 4,
                    SouthAmerica: 8,
                    Oceania: 2
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `2020`,
                    Asia: 75,
                    Africa: 43,
                    Europe: 7,
                    NorthAmerica: 4,
                    SouthAmerica: 7,
                    Oceania: 4
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStackedLineSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartCategoryCoreModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule,
    IgcDataChartStackedModule,
    IgcStackedFragmentSeriesModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcDataChartComponent
    private xAxis: IgcCategoryXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private stackedLineSeries: IgcStackedLineSeriesComponent
    private s1: IgcStackedFragmentSeriesComponent
    private s2: IgcStackedFragmentSeriesComponent
    private s3: IgcStackedFragmentSeriesComponent
    private s4: IgcStackedFragmentSeriesComponent
    private s5: IgcStackedFragmentSeriesComponent
    private dataToolTipLayer: IgcDataToolTipLayerComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
        var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
        var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
        var stackedLineSeries = this.stackedLineSeries = document.getElementById('stackedLineSeries') as IgcStackedLineSeriesComponent;
        var s1 = this.s1 = document.getElementById('s1') as IgcStackedFragmentSeriesComponent;
        var s2 = this.s2 = document.getElementById('s2') as IgcStackedFragmentSeriesComponent;
        var s3 = this.s3 = document.getElementById('s3') as IgcStackedFragmentSeriesComponent;
        var s4 = this.s4 = document.getElementById('s4') as IgcStackedFragmentSeriesComponent;
        var s5 = this.s5 = document.getElementById('s5') as IgcStackedFragmentSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            chart.legend = this.legend;
            xAxis.dataSource = this.continentsBirthRate;
            stackedLineSeries.dataSource = this.continentsBirthRate;
            stackedLineSeries.xAxis = this.xAxis;
            stackedLineSeries.yAxis = this.yAxis;
        }
        this._bind();
    }

    private _continentsBirthRate: ContinentsBirthRate = null;
    public get continentsBirthRate(): ContinentsBirthRate {
        if (this._continentsBirthRate == null)
        {
            this._continentsBirthRate = new ContinentsBirthRate();
        }
        return this._continentsBirthRate;
    }

}

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="legend-title">
        Annual Birth Rates by World Region
    </div>

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

    <div class="container fill">
        <igc-data-chart
        name="chart"
        id="chart"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label="Year"
            gap="0.75">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="yAxis"
            id="yAxis"
            minimum-value="0"
            maximum-value="140"
            interval="20"
            title="Millions of Births"
            title-angle="-90"
            label-format="{0} m">
            </igc-numeric-y-axis>
            <igc-stacked-line-series
            name="stackedLineSeries"
            id="stackedLineSeries"
            show-default-tooltip="false"
            marker-type="Circle">
                <igc-stacked-fragment-series
                name="s1"
                id="s1"
                value-member-path="Asia"
                title="Asia">
                </igc-stacked-fragment-series>
                <igc-stacked-fragment-series
                name="s2"
                id="s2"
                value-member-path="Africa"
                title="Africa">
                </igc-stacked-fragment-series>
                <igc-stacked-fragment-series
                name="s3"
                id="s3"
                value-member-path="Europe"
                title="Europe">
                </igc-stacked-fragment-series>
                <igc-stacked-fragment-series
                name="s4"
                id="s4"
                value-member-path="NorthAmerica"
                title="North America">
                </igc-stacked-fragment-series>
                <igc-stacked-fragment-series
                name="s5"
                id="s5"
                value-member-path="SouthAmerica"
                title="South America">
                </igc-stacked-fragment-series>
            </igc-stacked-line-series>
            <igc-data-tool-tip-layer
            name="dataToolTipLayer"
            id="dataToolTipLayer">
            </igc-data-tool-tip-layer>
        </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

Web Components 스택 100% 선형 차트

누적 100% 꺾은 선형 차트 y축 값 처리를 제외하고 모든 측면에서 누적 꺾은 선형 차트와 동일합니다. 100% 누적 꺾은 선형 차트 데이터를 직접적으로 표시하는 대신 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표시합니다. 아래 예는 태블릿, 휴대폰, 개인용 컴퓨터를 통한 부서별 온라인 쇼핑 트래픽에 대한 연구를 보여줍니다.

아래 예와 같이 데이터를 IgcStacked100LineSeriesComponent에 바인딩하여 IgcDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

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

    public Year: string;
    public Asia: number;
    public Africa: number;
    public Europe: number;
    public NorthAmerica: number;
    public SouthAmerica: number;
    public Oceania: number;

}
export class ContinentsBirthRate extends Array<ContinentsBirthRateItem> {
    public constructor(items: Array<ContinentsBirthRateItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new ContinentsBirthRateItem(
                {
                    Year: `1950`,
                    Asia: 62,
                    Africa: 13,
                    Europe: 10,
                    NorthAmerica: 4,
                    SouthAmerica: 8,
                    Oceania: 1
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1960`,
                    Asia: 68,
                    Africa: 12,
                    Europe: 15,
                    NorthAmerica: 4,
                    SouthAmerica: 9,
                    Oceania: 2
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1970`,
                    Asia: 80,
                    Africa: 17,
                    Europe: 11,
                    NorthAmerica: 3,
                    SouthAmerica: 9,
                    Oceania: 1
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1980`,
                    Asia: 77,
                    Africa: 21,
                    Europe: 12,
                    NorthAmerica: 3,
                    SouthAmerica: 10,
                    Oceania: 2
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1990`,
                    Asia: 87,
                    Africa: 24,
                    Europe: 9,
                    NorthAmerica: 3,
                    SouthAmerica: 10,
                    Oceania: 1
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `2000`,
                    Asia: 79,
                    Africa: 28,
                    Europe: 8,
                    NorthAmerica: 4,
                    SouthAmerica: 9,
                    Oceania: 3
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `2010`,
                    Asia: 78,
                    Africa: 35,
                    Europe: 10,
                    NorthAmerica: 4,
                    SouthAmerica: 8,
                    Oceania: 2
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `2020`,
                    Asia: 75,
                    Africa: 43,
                    Europe: 7,
                    NorthAmerica: 4,
                    SouthAmerica: 7,
                    Oceania: 4
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStacked100LineSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartCategoryCoreModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule,
    IgcDataChartStackedModule,
    IgcStackedFragmentSeriesModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcDataChartComponent
    private xAxis: IgcCategoryXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private stacked100LineSeries: IgcStacked100LineSeriesComponent
    private s1: IgcStackedFragmentSeriesComponent
    private s2: IgcStackedFragmentSeriesComponent
    private s3: IgcStackedFragmentSeriesComponent
    private s4: IgcStackedFragmentSeriesComponent
    private s5: IgcStackedFragmentSeriesComponent
    private dataToolTipLayer: IgcDataToolTipLayerComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
        var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
        var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
        var stacked100LineSeries = this.stacked100LineSeries = document.getElementById('stacked100LineSeries') as IgcStacked100LineSeriesComponent;
        var s1 = this.s1 = document.getElementById('s1') as IgcStackedFragmentSeriesComponent;
        var s2 = this.s2 = document.getElementById('s2') as IgcStackedFragmentSeriesComponent;
        var s3 = this.s3 = document.getElementById('s3') as IgcStackedFragmentSeriesComponent;
        var s4 = this.s4 = document.getElementById('s4') as IgcStackedFragmentSeriesComponent;
        var s5 = this.s5 = document.getElementById('s5') as IgcStackedFragmentSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            chart.legend = this.legend;
            xAxis.dataSource = this.continentsBirthRate;
            stacked100LineSeries.dataSource = this.continentsBirthRate;
            stacked100LineSeries.xAxis = this.xAxis;
            stacked100LineSeries.yAxis = this.yAxis;
        }
        this._bind();
    }

    private _continentsBirthRate: ContinentsBirthRate = null;
    public get continentsBirthRate(): ContinentsBirthRate {
        if (this._continentsBirthRate == null)
        {
            this._continentsBirthRate = new ContinentsBirthRate();
        }
        return this._continentsBirthRate;
    }

}

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="legend-title">
        Annual Birth Rates by World Region
    </div>

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

    <div class="container fill">
        <igc-data-chart
        name="chart"
        id="chart"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label="Year">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="yAxis"
            id="yAxis"
            interval="20"
            title-left-margin="10"
            label-format="{0}%">
            </igc-numeric-y-axis>
            <igc-stacked-100-line-series
            name="stacked100LineSeries"
            id="stacked100LineSeries"
            show-default-tooltip="false"
            marker-type="Circle">
                <igc-stacked-fragment-series
                name="s1"
                id="s1"
                value-member-path="Asia"
                title="Asia">
                </igc-stacked-fragment-series>
                <igc-stacked-fragment-series
                name="s2"
                id="s2"
                value-member-path="Africa"
                title="Africa">
                </igc-stacked-fragment-series>
                <igc-stacked-fragment-series
                name="s3"
                id="s3"
                value-member-path="Europe"
                title="Europe">
                </igc-stacked-fragment-series>
                <igc-stacked-fragment-series
                name="s4"
                id="s4"
                value-member-path="NorthAmerica"
                title="North America">
                </igc-stacked-fragment-series>
                <igc-stacked-fragment-series
                name="s5"
                id="s5"
                value-member-path="SouthAmerica"
                title="South America">
                </igc-stacked-fragment-series>
            </igc-stacked-100-line-series>
            <igc-data-tool-tip-layer
            name="dataToolTipLayer"
            id="dataToolTipLayer">
            </igc-data-tool-tip-layer>
        </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

Web Components 방사형 선형 차트

방사형 선형 차트 방사형 차트 그룹에 속하며 데이터 포인트를 연결하는 직선 모음으로 둘러싸인 채워지지 않은 다각형의 모양을 갖습니다. 이 차트 유형은 선형 차트와 동일한 데이터 그리기 개념을 사용하지만 데이터 포인트를 가로로 늘리는 대신 원형 축을 중심으로 둘러쌉니다.

아래 예와 같이 데이터를 IgcRadialLineSeriesComponent에 바인딩하여 IgcDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

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

    public attribute: string;
    public ronaldo: number;
    public messi: number;

}
export class FootballPlayerStats extends Array<FootballPlayerStatsItem> {
    public constructor(items: Array<FootballPlayerStatsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new FootballPlayerStatsItem(
                {
                    attribute: `Dribbling`,
                    ronaldo: 8,
                    messi: 10
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Passing`,
                    ronaldo: 8,
                    messi: 10
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Finishing`,
                    ronaldo: 10,
                    messi: 10
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Free Kicks`,
                    ronaldo: 8,
                    messi: 9
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Penalties`,
                    ronaldo: 9,
                    messi: 7
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Physical`,
                    ronaldo: 10,
                    messi: 7
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Team Play`,
                    ronaldo: 7,
                    messi: 9
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Heading`,
                    ronaldo: 9,
                    messi: 6
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcDataChartCoreModule,
    IgcDataChartRadialModule,
    IgcDataChartRadialCoreModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcDataChartComponent
    private angleAxis: IgcCategoryAngleAxisComponent
    private radiusAxis: IgcNumericRadiusAxisComponent
    private radialLineSeries1: IgcRadialLineSeriesComponent
    private radialLineSeries2: IgcRadialLineSeriesComponent
    private dataToolTipLayer: IgcDataToolTipLayerComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
        var angleAxis = this.angleAxis = document.getElementById('angleAxis') as IgcCategoryAngleAxisComponent;
        var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
        var radialLineSeries1 = this.radialLineSeries1 = document.getElementById('RadialLineSeries1') as IgcRadialLineSeriesComponent;
        var radialLineSeries2 = this.radialLineSeries2 = document.getElementById('RadialLineSeries2') as IgcRadialLineSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            chart.legend = this.legend;
            angleAxis.dataSource = this.footballPlayerStats;
            radialLineSeries1.dataSource = this.footballPlayerStats;
            radialLineSeries1.angleAxis = this.angleAxis;
            radialLineSeries1.valueAxis = this.radiusAxis;
            radialLineSeries2.dataSource = this.footballPlayerStats;
            radialLineSeries2.angleAxis = this.angleAxis;
            radialLineSeries2.valueAxis = this.radiusAxis;
        }
        this._bind();
    }

    private _footballPlayerStats: FootballPlayerStats = null;
    public get footballPlayerStats(): FootballPlayerStats {
        if (this._footballPlayerStats == null)
        {
            this._footballPlayerStats = new FootballPlayerStats();
        }
        return this._footballPlayerStats;
    }

}

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="legend-title">
        Ronaldo vs Messi Player Stats
    </div>

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

    <div class="container fill">
        <igc-data-chart
        name="chart"
        id="chart"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false">
            <igc-category-angle-axis
            name="angleAxis"
            id="angleAxis"
            label="attribute">
            </igc-category-angle-axis>
            <igc-numeric-radius-axis
            name="radiusAxis"
            id="radiusAxis"
            inner-radius-extent-scale="0.1"
            interval="2"
            minimum-value="0"
            maximum-value="10">
            </igc-numeric-radius-axis>
            <igc-radial-line-series
            name="RadialLineSeries1"
            id="RadialLineSeries1"
            value-member-path="ronaldo"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="3"
            title="Ronaldo"
            marker-type="Circle">
            </igc-radial-line-series>
            <igc-radial-line-series
            name="RadialLineSeries2"
            id="RadialLineSeries2"
            value-member-path="messi"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="3"
            title="Messi"
            marker-type="Circle">
            </igc-radial-line-series>
            <igc-data-tool-tip-layer
            name="dataToolTipLayer"
            id="dataToolTipLayer">
            </igc-data-tool-tip-layer>
        </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

Web Components 극 선형 차트

극선 차트(Polar 선형 차트 극좌표 차트 그룹에 속하며 극(각도/반지름) 좌표계에서 데이터 포인트를 연결하는 직선 모음을 사용하여 렌더링됩니다. 극선 차트는 분산 선형 차트와 동일한 데이터 플로팅 개념을 사용하지만 시각화는 데이터 포인트를 수평으로 늘리지 않고 원 주위로 둘러쌉니다.

아래 예와 같이 데이터를 IgcPolarLineSeriesComponent에 바인딩하여 IgcDataChartComponent 컨트롤에서 이러한 유형의 차트를 생성할 수 있습니다.

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

    public direction: number;
    public boatSpeed: number;
    public windSpeed: number;

}
export class BoatSailingData extends Array<BoatSailingDataItem> {
    public constructor(items: Array<BoatSailingDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new BoatSailingDataItem(
                {
                    direction: 0,
                    boatSpeed: 70,
                    windSpeed: 90
                }),
                new BoatSailingDataItem(
                {
                    direction: 45,
                    boatSpeed: 35,
                    windSpeed: 65
                }),
                new BoatSailingDataItem(
                {
                    direction: 90,
                    boatSpeed: 25,
                    windSpeed: 45
                }),
                new BoatSailingDataItem(
                {
                    direction: 135,
                    boatSpeed: 15,
                    windSpeed: 25
                }),
                new BoatSailingDataItem(
                {
                    direction: 180,
                    boatSpeed: 0,
                    windSpeed: 0
                }),
                new BoatSailingDataItem(
                {
                    direction: 225,
                    boatSpeed: 15,
                    windSpeed: 25
                }),
                new BoatSailingDataItem(
                {
                    direction: 270,
                    boatSpeed: 25,
                    windSpeed: 45
                }),
                new BoatSailingDataItem(
                {
                    direction: 315,
                    boatSpeed: 35,
                    windSpeed: 65
                }),
                new BoatSailingDataItem(
                {
                    direction: 360,
                    boatSpeed: 70,
                    windSpeed: 90
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcDataChartCoreModule,
    IgcDataChartPolarModule,
    IgcDataChartPolarCoreModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcDataChartComponent
    private angleAxis: IgcNumericAngleAxisComponent
    private radiusAxis: IgcNumericRadiusAxisComponent
    private polarLineSeries1: IgcPolarLineSeriesComponent
    private polarLineSeries2: IgcPolarLineSeriesComponent
    private dataToolTipLayer: IgcDataToolTipLayerComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
        var angleAxis = this.angleAxis = document.getElementById('angleAxis') as IgcNumericAngleAxisComponent;
        var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
        var polarLineSeries1 = this.polarLineSeries1 = document.getElementById('PolarLineSeries1') as IgcPolarLineSeriesComponent;
        var polarLineSeries2 = this.polarLineSeries2 = document.getElementById('PolarLineSeries2') as IgcPolarLineSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            chart.legend = this.legend;
            polarLineSeries1.dataSource = this.boatSailingData;
            polarLineSeries1.angleAxis = this.angleAxis;
            polarLineSeries1.radiusAxis = this.radiusAxis;
            polarLineSeries2.dataSource = this.boatSailingData;
            polarLineSeries2.angleAxis = this.angleAxis;
            polarLineSeries2.radiusAxis = this.radiusAxis;
        }
        this._bind();
    }

    private _boatSailingData: BoatSailingData = null;
    public get boatSailingData(): BoatSailingData {
        if (this._boatSailingData == null)
        {
            this._boatSailingData = new BoatSailingData();
        }
        return this._boatSailingData;
    }

}

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="legend-title">
        Wind Speed vs Boat Speed
    </div>

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

    <div class="container fill">
        <igc-data-chart
        name="chart"
        id="chart"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false">
            <igc-numeric-angle-axis
            name="angleAxis"
            id="angleAxis"
            start-angle-offset="-90"
            interval="30"
            minimum-value="0"
            maximum-value="360">
            </igc-numeric-angle-axis>
            <igc-numeric-radius-axis
            name="radiusAxis"
            id="radiusAxis"
            radius-extent-scale="0.9"
            inner-radius-extent-scale="0.1"
            interval="25"
            minimum-value="0"
            maximum-value="100">
            </igc-numeric-radius-axis>
            <igc-polar-line-series
            name="PolarLineSeries1"
            id="PolarLineSeries1"
            angle-member-path="direction"
            radius-member-path="windSpeed"
            show-default-tooltip="false"
            thickness="1"
            title="Wind Speed"
            marker-type="Circle">
            </igc-polar-line-series>
            <igc-polar-line-series
            name="PolarLineSeries2"
            id="PolarLineSeries2"
            angle-member-path="direction"
            radius-member-path="boatSpeed"
            show-default-tooltip="false"
            thickness="1"
            title="Boat Speed"
            marker-type="Circle">
            </igc-polar-line-series>
            <igc-data-tool-tip-layer
            name="dataToolTipLayer"
            id="dataToolTipLayer">
            </igc-data-tool-tip-layer>
        </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

추가 리소스

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

API 참조

다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.

차트 종류	컨트롤 이름	API 회원
선	`IgcCategoryChartComponent`	`chartType` = `Line`
극선	`IgcDataChartComponent`	`IgcPolarLineSeriesComponent`
방사형 라인	`IgcDataChartComponent`	`IgcRadialLineSeriesComponent`
누적선	`IgcDataChartComponent`	`IgcStackedLineSeriesComponent`
누적 100% 라인	`IgcDataChartComponent`	`IgcStacked100LineSeriesComponent`