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

Each of these tools exposes an OnCommand event that is triggered by mouse click. Note, the IgcToolActionIconMenuComponent is a wrapper for other tools that can also be wrapped inside a IgcToolActionIconMenuComponent.

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

The following example demonstrates a couple of features. First you can group tools together in the IgcToolActionSubPanelComponent including hiding built in tools such as the ZoomReset and AnalyzeMenu menu tool actions. In this example a new instance of the ZoomReset tool action is added and placed within the ZoomMenu by using the the afterId property and assigning that to ZoomOut. It is also highlighted via the isHighlighted property on the tool. This will ensure the new Reset tool is promptly displayed at the bottom of the ZoomMenu.

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 문자열 추가)입니다.

Data URL Icons

Similarly to adding svg, you can also add an Icon image from a URL via the RegisterIconFromDataURL. The method's third parameter would be used to enter a string URL.

The following snippet shows both methods of adding an Icon.

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