Web Components 차트 선택

Web Components {ComponentTitle}의 Ignite UI for Web Components 선택 기능을 사용하면 사용자가 차트 내에서 단일 또는 여러 계열을 대화형으로 선택, 강조 표시, 윤곽선 및 그 반대로 선택 취소할 수 있습니다. 이는 사용자가 보다 의미 있는 방식으로 제시된 데이터와 상호 작용하는 방법에 대한 다양한 가능성을 제공합니다.

선택 구성

기본 동작 selectionMode이 해제되어 있으며 다음 옵션 중 하나를 선택해야 합니다. 다음에서 사용할 수 있는 몇 가지 선택 모드가 있습니다. {ComponentName}

Auto
없음
Brighten
페이드Others
그레이스케일기타
FocusColorThickOutline (영문)
FocusColorOutline
SelectionColorThickOutline (영문)
SelectionColorOutline
FocusColorFill
SelectionColorFill (영문)
두껍게 외곽선

Brighten 선택한 항목이 FadeOthers 희미해지고 반대 효과가 발생합니다. GrayscaleOthers는 시리즈의 나머지 부분과 FadeOthers 비슷하게 동작하지만 대신 회색으로 표시됩니다. 이렇게 하면 모든 selectionBrush 설정이 재정의됩니다. SelectionColorOutline SelectionColorThickOutline 시리즈 주위에 테두리를 그립니다.

이와 함께, a selectionBehavior는 선택되는 항목에 대한 더 큰 제어를 제공하는 데 사용할 수 있습니다. 자동의 기본 동작은 다음과 같습니다 PerSeriesAndDataItemMultiSelect.

Auto
PerDataItemMultiSelect
PerDataItemSingleSelect
PerSeriesAndDataItemMultiSelect
PerSeriesAndDataItemSingleSelect
PerSeriesAndDataItemGlobalSingleSelect
PerSeriesMultiSelect
PerSeriesSingleSelect (영문)

Color Fill을 통한 선택 구성

다음 예제에서는 와 SelectionColorFill Auto 선택 동작 PerSeriesAndDataItemMultiSelect의 조합을 보여 줍니다. Color Fills는 전체 시리즈 항목의 배경 색상을 변경할 때 유용한 시각적 신호를 제공합니다. 각 항목을 클릭하면 항목이 녹색에서 보라색으로 변경되는 것을 볼 수 있습니다.

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

    public month: string;
    public temperature: number;

}
export class TemperatureAverageData extends Array<TemperatureAverageDataItem> {
    public constructor(items: Array<TemperatureAverageDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new TemperatureAverageDataItem(
                {
                    month: `Jan`,
                    temperature: 3
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Feb`,
                    temperature: 4
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Mar`,
                    temperature: 9
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Apr`,
                    temperature: 15
                }),
                new TemperatureAverageDataItem(
                {
                    month: `May`,
                    temperature: 21
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Jun`,
                    temperature: 26
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Jul`,
                    temperature: 29
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Aug`,
                    temperature: 28
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Sep`,
                    temperature: 24
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Oct`,
                    temperature: 18
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Nov`,
                    temperature: 11
                }),
                new TemperatureAverageDataItem(
                {
                    month: `Dec`,
                    temperature: 5
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcCategoryChartModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { TemperatureAverageDataItem, TemperatureAverageData } from './TemperatureAverageData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcCategoryChartModule,
    IgcDataChartInteractivityModule
);

export class Sample {

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

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

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

    private _temperatureAverageData: TemperatureAverageData = null;
    public get temperatureAverageData(): TemperatureAverageData {
        if (this._temperatureAverageData == null)
        {
            this._temperatureAverageData = new TemperatureAverageData();
        }
        return this._temperatureAverageData;
    }

}

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">
        Average Temperature Range in New York
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Column"
        y-axis-title="Temperature in Degrees Celsius"
        y-axis-title-left-margin="10"
        y-axis-title-right-margin="5"
        y-axis-label-left-margin="0"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        crosshairs-display-mode="None"
        tool-tip-type="None"
        selection-mode="SelectionColorFill"
        selection-behavior="Auto"
        selection-brush="purple"
        focus-brush="purple">
        </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 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

다중 선택 구성

다른 선택 모드는 다양한 선택 방법을 제공합니다. 예를 들어 selectionBehavior와 PerDataItemMultiSelect 여러 시리즈가 있는 경우 전체 범주의 모든 시리즈에 영향을 미치며 범주 간에 선택할 수 있습니다. 와 비교 PerDataItemSingleSelect, 한 번에 하나의 항목 범주만 선택할 수 있습니다. 이는 여러 시리즈가 서로 다른 데이터 소스에 바인딩되고 범주 간 선택을 더 잘 제어할 수 있는 경우에 유용합니다. PerSeriesAndDataItemGlobalSingleSelect 한 번에 모든 범주에서 단일 시리즈를 선택할 수 있습니다.

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

    public location: string;
    public year: number;
    public hydro: number;
    public solar: number;
    public wind: number;
    public other: number;

}
export class EnergyRenewableConsumption extends Array<EnergyRenewableConsumptionItem> {
    public constructor(items: Array<EnergyRenewableConsumptionItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EnergyRenewableConsumptionItem(
                {
                    location: `China`,
                    year: 2019,
                    hydro: 1269.5,
                    solar: 223,
                    wind: 405.2,
                    other: 102.8
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Europe`,
                    year: 2019,
                    hydro: 632.54,
                    solar: 154,
                    wind: 461.3,
                    other: 220.3
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `USA`,
                    year: 2019,
                    hydro: 271.16,
                    solar: 108,
                    wind: 303.4,
                    other: 78.34
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Brazil`,
                    year: 2019,
                    hydro: 399.3,
                    solar: 5.5,
                    wind: 55.83,
                    other: 56.25
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Canada`,
                    year: 2019,
                    hydro: 381.98,
                    solar: 4.3,
                    wind: 34.17,
                    other: 10.81
                }),
            ];
            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 { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
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 propertyEditor: IgcPropertyEditorPanelComponent
    private selectionModeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private selectionBehaviorEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var selectionModeEditor = this.selectionModeEditor = document.getElementById('SelectionModeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var selectionBehaviorEditor = this.selectionBehaviorEditor = document.getElementById('SelectionBehaviorEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

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

    private _energyRenewableConsumption: EnergyRenewableConsumption = null;
    public get energyRenewableConsumption(): EnergyRenewableConsumption {
        if (this._energyRenewableConsumption == null)
        {
            this._energyRenewableConsumption = new EnergyRenewableConsumption();
        }
        return this._energyRenewableConsumption;
    }

    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
        name="PropertyEditor"
        id="PropertyEditor"
        description-type="CategoryChart"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            property-path="SelectionMode"
            name="SelectionModeEditor"
            id="SelectionModeEditor"
            label="Selection Mode: "
            primitive-value="SelectionColorFill">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="SelectionBehavior"
            name="SelectionBehaviorEditor"
            id="SelectionBehaviorEditor"
            label="Selection Behavior: "
            primitive-value="PerSeriesAndDataItemGlobalSingleSelect">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Highest Grossing Movie Franchises
    </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="Column"
        y-axis-title-left-margin="10"
        y-axis-title-right-margin="5"
        y-axis-label-left-margin="0"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        crosshairs-display-mode="None"
        selection-mode="SelectionColorFill"
        selection-behavior="PerSeriesAndDataItemGlobalSingleSelect"
        selection-brush="orange"
        focus-brush="orange">
        </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

아웃라인 선택 구성

가 적용되면 focusBrush 속성이 포커스 옵션 중 하나로 설정될 때 selectionMode 선택한 시리즈가 테두리와 함께 나타납니다.

방사형 시리즈 선택

이 예제에서는 각 방사형 시리즈를 다른 색상으로 선택할 수 있는 다른 시리즈 유형을 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 { IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialColumnSeriesComponent } from 'igniteui-webcomponents-charts';
import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


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

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcDataChartComponent
    private angleAxis: IgcCategoryAngleAxisComponent
    private radiusAxis: IgcNumericRadiusAxisComponent
    private radialColumnSeries1: IgcRadialColumnSeriesComponent
    private radialColumnSeries2: IgcRadialColumnSeriesComponent
    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 radialColumnSeries1 = this.radialColumnSeries1 = document.getElementById('RadialColumnSeries1') as IgcRadialColumnSeriesComponent;
        var radialColumnSeries2 = this.radialColumnSeries2 = document.getElementById('RadialColumnSeries2') as IgcRadialColumnSeriesComponent;

        this._bind = () => {
            chart.legend = this.legend;
            angleAxis.dataSource = this.footballPlayerStats;
            radialColumnSeries1.dataSource = this.footballPlayerStats;
            radialColumnSeries1.angleAxis = this.angleAxis;
            radialColumnSeries1.valueAxis = this.radiusAxis;
            radialColumnSeries2.dataSource = this.footballPlayerStats;
            radialColumnSeries2.angleAxis = this.angleAxis;
            radialColumnSeries2.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"
        selection-mode="SelectionColorFill"
        selection-behavior="PerSeriesMultiSelect">
            <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-column-series
            name="RadialColumnSeries1"
            id="RadialColumnSeries1"
            value-member-path="ronaldo"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="3"
            title="Ronaldo"
            selection-brush="yellow">
            </igc-radial-column-series>
            <igc-radial-column-series
            name="RadialColumnSeries2"
            id="RadialColumnSeries2"
            value-member-path="messi"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="3"
            title="Messi"
            selection-brush="cyan">
            </igc-radial-column-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

프로그래매틱 선택

차트 선택은 차트에서 선택한 항목을 시작 또는 런타임 시 볼 수 있는 코드에서 구성할 수도 있습니다. 이 작업은 항목에 항목을 추가하여 수행할 수 있습니다. SelectedSeriesCollection의 IgcCategoryChartComponent. 이 Matcher의 속성 IgcChartSelection Object를 사용하면 "matcher"를 기반으로 시리즈를 선택할 수 있으며, 차트에서 실제 시리즈에 액세스할 수 없는 경우에 이상적입니다. 데이터 원본에 포함된 속성을 알고 있는 경우 ValueMemberPath 시리즈가 될 것입니다.

matcher는 와 같은 IgcDataChartComponent 실제 시리즈에 액세스할 수 없는 경우와 같은 IgcCategoryChartComponent 차트에서 사용하는 데 이상적입니다. 이 경우 데이터 원본에 포함된 속성을 알고 있으면 계열에 포함될 ValueMemberPaths를 추측할 수 있습니다. 예를 들어 데이터 소스에 Nuclear, Coal, Oil, Solar 숫자 속성이 있는 경우 이러한 각 속성에 대해 생성된 시리즈가 있음을 알 수 있습니다. Solar 값에 바인딩된 계열을 강조 표시하려면 다음 속성 집합이 있는 matcher를 사용하여 ChartSelection 개체를 컬렉션에 selectedSeriesItems 추가할 수 있습니다

예를 들어 데이터 소스에 Nuclear, Coal, Oil, Solar 숫자 속성이 있는 경우 이러한 각 속성에 대해 생성된 시리즈가 있음을 알 수 있습니다. Solar 값에 바인딩된 계열을 선택하려는 경우 다음 속성 집합이 있는 검사기를 사용하여 SelectedSeriesItems 컬렉션에 ChartSelection 개체를 추가할 수 있습니다.

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

    public location: string;
    public year: number;
    public hydro: number;
    public solar: number;
    public wind: number;
    public other: number;

}
export class EnergyRenewableConsumption extends Array<EnergyRenewableConsumptionItem> {
    public constructor(items: Array<EnergyRenewableConsumptionItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EnergyRenewableConsumptionItem(
                {
                    location: `China`,
                    year: 2019,
                    hydro: 1269.5,
                    solar: 223,
                    wind: 405.2,
                    other: 102.8
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Europe`,
                    year: 2019,
                    hydro: 632.54,
                    solar: 154,
                    wind: 461.3,
                    other: 220.3
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `USA`,
                    year: 2019,
                    hydro: 271.16,
                    solar: 108,
                    wind: 303.4,
                    other: 78.34
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Brazil`,
                    year: 2019,
                    hydro: 399.3,
                    solar: 5.5,
                    wind: 55.83,
                    other: 56.25
                }),
                new EnergyRenewableConsumptionItem(
                {
                    location: `Canada`,
                    year: 2019,
                    hydro: 381.98,
                    solar: 4.3,
                    wind: 34.17,
                    other: 10.81
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcLegendModule, IgcCategoryChartModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, LegendDescriptionModule, CategoryChartDescriptionModule, DataChartAnnotationDescriptionModule, DataChartInteractivityDescriptionModule, DataChartCoreDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
import { IgcChartSelection, IgcSeriesMatcher } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcCategoryChartModule,
    IgcDataChartAnnotationModule,
    IgcDataChartInteractivityModule,
    IgcDataChartCoreModule
);

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.legend = this.legend;
            chart.dataSource = this.energyRenewableConsumption;
        }
        this._bind();

        this.selectionMatcherOnViewInit();
    }

    private _energyRenewableConsumption: EnergyRenewableConsumption = null;
    public get energyRenewableConsumption(): EnergyRenewableConsumption {
        if (this._energyRenewableConsumption == null)
        {
            this._energyRenewableConsumption = new EnergyRenewableConsumption();
        }
        return this._energyRenewableConsumption;
    }

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

    private _timer: ReturnType<typeof setInterval>;

    public selectionMatcherOnViewInit(): void {

    	var chart = this.chart;

    	this._timer = setTimeout(() => {
    		var data = this.energyRenewableConsumption;
    		let matcher: IgcSeriesMatcher = new IgcSeriesMatcher();

    		let selection: IgcChartSelection = new IgcChartSelection();
    		selection.item = data[1];
    		matcher.memberPath = "hydro";
    		matcher.memberPathType = "ValueMemberPath";
    		selection.matcher = matcher;
    		chart.selectedSeriesItems.add(selection);

    		let matcher2: IgcSeriesMatcher = new IgcSeriesMatcher();
    		let selection2: IgcChartSelection = new IgcChartSelection();
    		selection2.item = data[2];
    		matcher2.memberPath = "wind";
    		matcher2.memberPathType = "ValueMemberPath";
    		selection2.matcher = matcher2;

    		chart.selectedSeriesItems.add(selection2);
        }, 100);
    }

}

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="Column"
        crosshairs-display-mode="None"
        y-axis-title="TWh"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        selection-mode="SelectionColorFill"
        selection-behavior="Auto"
        selection-brush="orange">
        </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

API 참조

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

`IgcCategoryChartComponent` Properties	`IgcDataChartComponent` Properties