Web Components 도구 모음 개요

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

Web Components 도구 모음 예제

EXAMPLE

DATA

TS

HTML

CSS

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

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

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcLegendModule, IgcCategoryChartModule, IgcCategoryChartToolbarModule } from 'igniteui-webcomponents-charts';
import { IgcToolbarModule } from 'igniteui-webcomponents-layouts';
import { IgcCheckboxListModule } from 'igniteui-webcomponents-grids';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcToolbarComponent } from 'igniteui-webcomponents-layouts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcToolbarModule,
    IgcCategoryChartModule,
    IgcCategoryChartToolbarModule,
    IgcCheckboxListModule
);

export class Sample {

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

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

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

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

}

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="aboveContentSplit">
        <div class="aboveContentLeftContainer">
            <igc-toolbar
            name="toolbar"
            id="toolbar"
            orientation="Horizontal">
            </igc-toolbar>
        </div>
        <div class="aboveContentRightContainer">
            <igc-legend
            name="legend"
            id="legend"
            orientation="Horizontal">
            </igc-legend>
        </div>
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        chart-type="Line"
        is-horizontal-zoom-enabled="true"
        is-vertical-zoom-enabled="true"
        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"
        y-axis-label-location="OutsideRight"
        is-transition-in-enabled="true">
        </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 */

.aboveContentSplit {
    display: flex;
    flex-direction: row;
}
.aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-end;
}
.aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: flex-end;
}
cssコピー

Edit in: Codesandbox

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

종속성

Ignite UI for Web Components 레이아웃, 입력, 차트 및 핵심 패키지를 설치합니다.

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

​IgcDataChartComponent 구성 요소 및 해당 기능과 함께 IgcToolbarComponent 사용할 때 다음 모듈이 필요합니다.

import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcToolbarModule } from 'igniteui-webcomponents-layouts';
import { IgcDataChartToolbarModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcDataChartCategoryTrendLineModule } from 'igniteui-webcomponents-charts';

ModuleManager.register(
    IgcToolbarModule,
    IgcToolActionLabelModule,
    IgcDataChartToolbarModule,
    IgcDataChartCategoryModule,
    IgcDataChartCoreModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule,
    IgcDataChartCategoryTrendLineModule
);
ts

용법

도구 작업

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

• IgcToolActionButtonComponent
• IgcToolActionCheckboxComponent
• IgcToolActionIconButtonComponent
• IgcToolActionIconMenuComponent
• IgcToolActionLabelComponent
• IgcToolActionNumberInputComponent
• IgcToolActionRadioComponent
• IgcToolActionSubPanelComponent

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

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

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

EXAMPLE

DATA

TS

HTML

CSS

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

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

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcToolbarModule } from 'igniteui-webcomponents-layouts';
import { IgcDataChartToolbarModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcDataChartCategoryTrendLineModule } from 'igniteui-webcomponents-charts';
import { IgcToolbarComponent, IgcToolActionIconMenuComponent, IgcToolActionGroupHeaderComponent, IgcToolActionSubPanelComponent, IgcToolActionCheckboxComponent, IgcToolActionLabelComponent } from 'igniteui-webcomponents-layouts';
import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgcToolCommandEventArgs } from 'igniteui-webcomponents-layouts';
import { IgcSeriesComponent, IgcDataToolTipLayerComponent, IgcCrosshairLayerComponent, IgcFinalValueLayerComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcToolbarModule,
    IgcDataChartToolbarModule,
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartAnnotationModule,
    IgcDataChartInteractivityModule,
    IgcDataChartCategoryTrendLineModule
);

export class Sample {

    private toolbar: IgcToolbarComponent
    private menuForSubPanelTool: IgcToolActionIconMenuComponent
    private subPanelGroup: IgcToolActionGroupHeaderComponent
    private customSubPanelTools: IgcToolActionSubPanelComponent
    private enableTooltipsLabel: IgcToolActionCheckboxComponent
    private enableCrosshairsLabel: IgcToolActionCheckboxComponent
    private enableFinalValuesLabel: IgcToolActionCheckboxComponent
    private zoomResetLabel: IgcToolActionLabelComponent
    private zoomResetHidden: IgcToolActionLabelComponent
    private analyzeMenu: IgcToolActionIconMenuComponent
    private copyMenu: IgcToolActionLabelComponent
    private chart: IgcDataChartComponent
    private xAxis: IgcCategoryXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private lineSeries1: IgcLineSeriesComponent
    private lineSeries2: IgcLineSeriesComponent
    private lineSeries3: IgcLineSeriesComponent
    private _bind: () => void;

    constructor() {
        var toolbar = this.toolbar = document.getElementById('toolbar') as IgcToolbarComponent;
        this.toolbarToggleAnnotations = this.toolbarToggleAnnotations.bind(this);
        var menuForSubPanelTool = this.menuForSubPanelTool = document.getElementById('MenuForSubPanelTool') as IgcToolActionIconMenuComponent;
        var subPanelGroup = this.subPanelGroup = document.getElementById('SubPanelGroup') as IgcToolActionGroupHeaderComponent;
        var customSubPanelTools = this.customSubPanelTools = document.getElementById('CustomSubPanelTools') as IgcToolActionSubPanelComponent;
        var enableTooltipsLabel = this.enableTooltipsLabel = document.getElementById('EnableTooltipsLabel') as IgcToolActionCheckboxComponent;
        var enableCrosshairsLabel = this.enableCrosshairsLabel = document.getElementById('EnableCrosshairsLabel') as IgcToolActionCheckboxComponent;
        var enableFinalValuesLabel = this.enableFinalValuesLabel = document.getElementById('EnableFinalValuesLabel') as IgcToolActionCheckboxComponent;
        var zoomResetLabel = this.zoomResetLabel = document.getElementById('zoomResetLabel') as IgcToolActionLabelComponent;
        var zoomResetHidden = this.zoomResetHidden = document.getElementById('zoomResetHidden') as IgcToolActionLabelComponent;
        var analyzeMenu = this.analyzeMenu = document.getElementById('AnalyzeMenu') as IgcToolActionIconMenuComponent;
        var copyMenu = this.copyMenu = document.getElementById('CopyMenu') as IgcToolActionLabelComponent;
        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 = () => {
            toolbar.target = this.chart;
            toolbar.onCommand = this.toolbarToggleAnnotations;
            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;
    }

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

}

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="aboveContentSplit">
        <div class="aboveContentLeftContainer">
            <igc-toolbar
            name="toolbar"
            id="toolbar"
            orientation="Horizontal">
                <igc-tool-action-icon-menu
                name="MenuForSubPanelTool"
                id="MenuForSubPanelTool"
                icon-collection-name="ChartToolbarIcons"
                icon-name="analyze">
                    <igc-tool-action-group-header
                    name="SubPanelGroup"
                    id="SubPanelGroup"
                    close-on-execute="true"
                    title="Visualizations"
                    subtitle="Layers">
                    </igc-tool-action-group-header>
                    <igc-tool-action-sub-panel
                    name="CustomSubPanelTools"
                    id="CustomSubPanelTools">
                        <igc-tool-action-checkbox
                        name="EnableTooltipsLabel"
                        id="EnableTooltipsLabel"
                        title="Enable Tooltips"
                        command-id="EnableTooltips">
                        </igc-tool-action-checkbox>
                        <igc-tool-action-checkbox
                        name="EnableCrosshairsLabel"
                        id="EnableCrosshairsLabel"
                        title="Enable Crosshairs"
                        command-id="EnableCrosshairs">
                        </igc-tool-action-checkbox>
                        <igc-tool-action-checkbox
                        name="EnableFinalValuesLabel"
                        id="EnableFinalValuesLabel"
                        title="Enable Final Values"
                        command-id="EnableFinalValues">
                        </igc-tool-action-checkbox>
                    </igc-tool-action-sub-panel>
                </igc-tool-action-icon-menu>
                <igc-tool-action-label
                name="zoomResetLabel"
                id="zoomResetLabel"
                title="Reset"
                after-id="ZoomOut"
                icon-name="reset"
                icon-collection-name="ChartToolbarIcons"
                command-id="ZoomReset"
                is-highlighted="true">
                </igc-tool-action-label>
                <igc-tool-action-label
                name="zoomResetHidden"
                id="zoomResetHidden"
                overlay-id="ZoomReset"
                visibility="Collapsed">
                </igc-tool-action-label>
                <igc-tool-action-icon-menu
                name="AnalyzeMenu"
                id="AnalyzeMenu"
                overlay-id="AnalyzeMenu"
                visibility="Collapsed">
                </igc-tool-action-icon-menu>
                <igc-tool-action-label
                name="CopyMenu"
                id="CopyMenu"
                overlay-id="CopyMenu"
                visibility="Collapsed">
                </igc-tool-action-label>
            </igc-toolbar>
        </div>
        <div class="aboveContentRightContainer">
            <!-- insert aboveContentRight -->
            <!-- end aboveContentRight -->
        </div>
    </div>

    <div class="container fill">
        <igc-data-chart
        computed-plot-area-margin-mode="Series"
        is-horizontal-zoom-enabled="true"
        is-vertical-zoom-enabled="true"
        name="chart"
        id="chart">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label="year">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="yAxis"
            id="yAxis"
            title="TWh"
            label-location="OutsideRight">
            </igc-numeric-y-axis>
            <igc-line-series
            name="lineSeries1"
            id="lineSeries1"
            title="Electricity"
            value-member-path="america">
            </igc-line-series>
            <igc-line-series
            name="LineSeries2"
            id="LineSeries2"
            title="Electricity"
            value-member-path="europe">
            </igc-line-series>
            <igc-line-series
            name="LineSeries3"
            id="LineSeries3"
            title="Electricity"
            value-member-path="china">
            </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 */

.aboveContentSplit {
    display: flex;
    flex-direction: row;
}
.aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-end;
}
.aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: flex-end;
}
cssコピー

Edit in: Codesandbox

Web Components 데이터 차트 통합

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

  <div>
      <igc-toolbar
      name="Toolbar"
      id="Toolbar">
      </igc-toolbar>
  </div>

  <div class="container fill">
      <igc-data-chart
      is-horizontal-zoom-enabled="true"
      name="chart"
      id="chart">
      </igc-data-chart>
  </div>
html

  private _bind: () => void;
  constructor() {
    var toolbar = this.toolbar = document.getElementById('Toolbar') as IgcToolbarComponent;
    var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;

    this._bind = () => {
        toolbar.target = this.chart;
    }
    this._bind();
  }
ts

​IgcDataChartComponent가 툴바와 연결되면 기존의 여러 IgcToolActionComponent 항목과 메뉴를 사용할 수 있습니다. 다음은 내장된 Web Components IgcDataChartComponent 도구 작업과 관련 overlayId 목록입니다.

확대/축소 작업

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

추세 조치

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

이미지에 저장 작업

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

SVG 아이콘

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

데이터 URL 아이콘

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

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

public toolbarCustomIconOnViewInit(): void {

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

public toolbarCustomIconOnViewInit(): void {

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

}
ts

<igc-tool-action-label
    title="Custom Icon"
    icon-name="CustomIcon"
    icon-collection-name="CustomCollection">
</igc-tool-action-label>
html

public toolbarCustomIconOnViewInit(): void {

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

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

}
ts

public toolbarCustomIconOnViewInit(): void {

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

@code {

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

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

private IgbToolbar toolbar;

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

}

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

수직 방향

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

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

다음 예제에서는 Web Components 도구 모음의 수직 방향을 보여줍니다.

EXAMPLE

DATA

TS

HTML

CSS

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

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

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcToolbarModule } from 'igniteui-webcomponents-layouts';
import { IgcDataChartToolbarModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcAnnotationLayerProxyModule, IgcDataChartCategoryTrendLineModule } from 'igniteui-webcomponents-charts';
import { IgcToolbarComponent } from 'igniteui-webcomponents-layouts';
import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcToolbarModule,
    IgcDataChartToolbarModule,
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartAnnotationModule,
    IgcDataChartInteractivityModule,
    IgcAnnotationLayerProxyModule,
    IgcDataChartCategoryTrendLineModule
);

export class Sample {

    private toolbar: IgcToolbarComponent
    private chart: IgcDataChartComponent
    private xAxis: IgcCategoryXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private lineSeries1: IgcLineSeriesComponent
    private _bind: () => void;

    constructor() {
        var toolbar = this.toolbar = document.getElementById('toolbar') as IgcToolbarComponent;
        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;

        this._bind = () => {
            toolbar.target = this.chart;
            xAxis.dataSource = this.countryRenewableElectricity;
            lineSeries1.xAxis = this.xAxis;
            lineSeries1.yAxis = this.yAxis;
            lineSeries1.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="aboveContent">
        <igc-toolbar
        name="toolbar"
        id="toolbar"
        orientation="Vertical">
        </igc-toolbar>
    </div>

    <div class="container fill">
        <igc-data-chart
        is-horizontal-zoom-enabled="true"
        name="chart"
        id="chart">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label="year">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="yAxis"
            id="yAxis"
            title="TWh"
            label-location="OutsideRight">
            </igc-numeric-y-axis>
            <igc-line-series
            name="lineSeries1"
            id="lineSeries1"
            title="Electricity"
            value-member-path="america">
            </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コピー

Edit in: Codesandbox

색상 편집기

Web Components 도구 모음에 사용자 정의 색상 편집기 도구를 추가할 수 있으며, 이 도구는 명령 이벤트와 함께 작동하여 애플리케이션에 사용자 정의 스타일을 적용할 수도 있습니다.

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

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

EXAMPLE

DATA

TS

HTML

CSS

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

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

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcToolbarModule, IgcToolActionComboModule, IgcToolActionColorEditorModule } from 'igniteui-webcomponents-layouts';
import { IgcDataChartToolbarModule, IgcDataLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCategoryModule, IgcDataChartCoreModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcToolbarComponent, IgcToolActionColorEditorComponent } from 'igniteui-webcomponents-layouts';
import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcLineSeriesComponent } from 'igniteui-webcomponents-charts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgcToolCommandEventArgs } from 'igniteui-webcomponents-layouts';
import { IgcSeriesComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcToolbarModule,
    IgcToolActionComboModule,
    IgcToolActionColorEditorModule,
    IgcDataChartToolbarModule,
    IgcDataLegendModule,
    IgcNumberAbbreviatorModule,
    IgcDataChartCategoryModule,
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartAnnotationModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule
);

export class Sample {

    private toolbar: IgcToolbarComponent
    private colorEditorTool: IgcToolActionColorEditorComponent
    private chart: IgcDataChartComponent
    private xAxis: IgcCategoryXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private lineSeries1: IgcLineSeriesComponent
    private _bind: () => void;

    constructor() {
        var toolbar = this.toolbar = document.getElementById('toolbar') as IgcToolbarComponent;
        this.colorEditorToggleSeriesBrush = this.colorEditorToggleSeriesBrush.bind(this);
        var colorEditorTool = this.colorEditorTool = document.getElementById('colorEditorTool') as IgcToolActionColorEditorComponent;
        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;

        this._bind = () => {
            toolbar.target = this.chart;
            toolbar.onCommand = this.colorEditorToggleSeriesBrush;
            xAxis.dataSource = this.countryRenewableElectricity;
            lineSeries1.xAxis = this.xAxis;
            lineSeries1.yAxis = this.yAxis;
            lineSeries1.dataSource = this.countryRenewableElectricity;
        }
        this._bind();
    }

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

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

    	switch (args.command.commandId)
    	{
            case "ToggleSeriesBrush":
                let series = target.contentSeries[0] as IgcSeriesComponent;
                series.brush = color as any;
            break;
        }
    }

}

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="aboveContentSplit">
        <div class="aboveContentLeftContainer">
            <igc-toolbar
            name="toolbar"
            id="toolbar">
                <igc-tool-action-color-editor
                title="Series Brush"
                name="colorEditorTool"
                id="colorEditorTool"
                command-id="ToggleSeriesBrush">
                </igc-tool-action-color-editor>
            </igc-toolbar>
        </div>
        <div class="aboveContentRightContainer">
            <!-- insert aboveContentRight -->
            <!-- end aboveContentRight -->
        </div>
    </div>

    <div class="container fill">
        <igc-data-chart
        is-horizontal-zoom-enabled="true"
        name="chart"
        id="chart">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label="year">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="yAxis"
            id="yAxis"
            title="TWh"
            label-location="OutsideRight">
            </igc-numeric-y-axis>
            <igc-line-series
            name="lineSeries1"
            id="lineSeries1"
            title="Electricity"
            value-member-path="america"
            marker-type="None">
            </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 */

.aboveContentSplit {
    display: flex;
    flex-direction: row;
}
.aboveContentLeftContainer {
    margin-left: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-end;
}
.aboveContentRightContainer {
    margin-right: 1.25rem;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: flex-end;
}
cssコピー

Edit in: Codesandbox

API 참조

• IgcToolbarComponent
• IgcDataChartComponent

추가 리소스

• Ignite UI for Web Components 포럼
• ​GitHub Ignite UI for Web Components