Web Components 데이터 차트 | 데이터 시각화 도구 | 내비게이션

Ignite UI for Web Components 차트를 사용하면 마우스, 키보드 및 터치를 통해 대화형 이동 및 확대/축소를 수행할 수 있습니다.

다음 예에서는 사용 가능한 모든 이동 및 확대/축소 옵션을 보여줍니다. 버튼을 사용하여 예제와 상호 작용하거나 드롭다운 또는 확인란을 사용하여 원하는 옵션을 선택할 수 있습니다.



export class SampleFinancialData {

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

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

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

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

    public static addDays(dt: Date, days: number): Date {
        return new Date(dt.getTime() + days * 24 * 60 * 60 * 1000);
    }

    public static getShortDate(dt: Date, showYear: boolean): string {
        const months = [
            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ];
        const ind = dt.getMonth();
        const day = dt.getDay() + 1;
        let label = months[ind] + " " + day;
        if (showYear) {
            label += " " +  dt.getFullYear();
        }
        return label;
    }
}
ts

import { ModuleManager } from 'igniteui-webcomponents-core';
// data chart's modules:
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
// financial series modules:
import { IgcDataChartFinancialModule } from 'igniteui-webcomponents-charts';
// data chart's elements:
import { IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcCategoryXAxisComponent } from 'igniteui-webcomponents-charts';
import { IgcFinancialPriceSeriesComponent } from 'igniteui-webcomponents-charts';
import { InteractionState } from 'igniteui-webcomponents-core';
import { ModifierKeys } from 'igniteui-webcomponents-core';
import { SampleFinancialData } from './SampleFinancialData';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartFinancialModule,
    IgcDataChartInteractivityModule,
);

export class DataChartNavigation {

    private chart: IgcDataChartComponent;

    constructor() {

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

        this.chart.actualWindowScaleHorizontal = 0.60;
        this.chart.actualWindowScaleVertical = 0.60;
        this.chart.actualWindowPositionVertical = 0.20;
        this.chart.actualWindowPositionHorizontal = 0.20;

        const panUp = document.getElementById('panUp') as HTMLButtonElement;
        panUp!.addEventListener('click', this.onPanUpClick);

        const panLeft = document.getElementById('panLeft') as HTMLButtonElement;
        panLeft!.addEventListener('click', this.onPanLeftClick);

        const zoomIn = document.getElementById('zoomIn') as HTMLButtonElement;
        zoomIn!.addEventListener('click', this.onZoomInClick);

        const panDown = document.getElementById('panDown') as HTMLButtonElement;
        panDown!.addEventListener('click', this.onPanDownClick);

        const panRight = document.getElementById('panRight') as HTMLButtonElement;
        panRight!.addEventListener('click', this.onPanRightClick);

        const zoomOut = document.getElementById('zoomOut') as HTMLButtonElement;
        zoomOut!.addEventListener('click', this.onZoomOutClick);

        const panModSelect = document.getElementById('panModSelect') as HTMLSelectElement;
        panModSelect!.value = 'Alt';
        panModSelect!.addEventListener('change', this.onPanModifierChange);

        const interactionSelect = document.getElementById('interactionSelect') as HTMLSelectElement;
        interactionSelect!.value = 'DragPan';
        interactionSelect!.addEventListener('change', this.onDefaultInteractionChange);

        const dragModSelect = document.getElementById('dragModSelect') as HTMLSelectElement;
        dragModSelect!.value = 'Shift';
        dragModSelect!.addEventListener('change', this.onDragModifierChange);

        const zoomEnabled = document.getElementById('zoomEnabled') as HTMLInputElement;
        zoomEnabled!.checked = true;
        zoomEnabled!.addEventListener('change', this.onZoomEnabledChange);
    }

    public onDefaultInteractionChange = (e: any) => {
        switch (e.target.value) {
            case 'DragZoom':
                this.chart.defaultInteraction = InteractionState.DragZoom;
                break;
            case 'DragPan':
                this.chart.defaultInteraction = InteractionState.DragPan;
                break;
            case 'None':
                this.chart.defaultInteraction = InteractionState.None;
                break;
        }
    }

    public onPanModifierChange = (e: any) => {
        switch (e.target.value) {
            case 'Alt':
                this.chart.panModifier = ModifierKeys.Alt;
                break;
            case 'Control':
                this.chart.panModifier = ModifierKeys.Control;
                break;
            case 'Shift':
                this.chart.panModifier = ModifierKeys.Shift;
                break;
            case 'Windows':
                this.chart.panModifier = ModifierKeys.Windows;
                break;
            case 'Apple':
                this.chart.panModifier = ModifierKeys.Apple;
                break;
            case 'None':
                this.chart.panModifier = ModifierKeys.None;
                break;
        }
    }

    public onDragModifierChange = (e: any) => {
        switch (e.target.value) {
            case 'Alt':
                this.chart.dragModifier = ModifierKeys.Alt;
                break;
            case 'Control':
                this.chart.dragModifier = ModifierKeys.Control;
                break;
            case 'Shift':
                this.chart.dragModifier = ModifierKeys.Shift;
                break;
            case 'Windows':
                this.chart.dragModifier = ModifierKeys.Windows;
                break;
            case 'Apple':
                this.chart.dragModifier = ModifierKeys.Apple;
                break;
            case 'None':
                this.chart.dragModifier = ModifierKeys.None;
                break;
        }
    }

    public onZoomEnabledChange = (e: any) => {
        const isZoomEnabled = e.target.checked;
        this.chart.isHorizontalZoomEnabled = isZoomEnabled;
        this.chart.isVerticalZoomEnabled = isZoomEnabled;
    }

    public onPanUpClick = (e: any) => {
        this.chart.actualWindowPositionVertical -= 0.05;
    }

    public onPanDownClick = (e: any) => {
        this.chart.actualWindowPositionVertical += 0.05;
    }

    public onPanLeftClick = (e: any) => {
        this.chart.actualWindowPositionHorizontal -= 0.05;
    }

    public onPanRightClick = (e: any) => {
        this.chart.actualWindowPositionHorizontal += 0.05;
    }

    public onZoomOutClick = (e: any) => {
        if (this.chart.actualWindowPositionHorizontal > 0.025) {
            this.chart.actualWindowPositionHorizontal -= 0.025;
        }
        if (this.chart.actualWindowPositionVertical > 0.025) {
            this.chart.actualWindowPositionVertical -= 0.025;
        }

        if (this.chart.actualWindowScaleHorizontal < 1.0) {
            this.chart.actualWindowScaleHorizontal += 0.05;
        }
        if (this.chart.actualWindowScaleVertical < 1.0) {
            this.chart.actualWindowScaleVertical += 0.05;
        }
    }

    public onZoomInClick = (e: any) => {
        if (this.chart.actualWindowPositionHorizontal < 1.0) {
            this.chart.actualWindowPositionHorizontal += 0.025;
        }
        if (this.chart.actualWindowPositionVertical < 1.0) {
            this.chart.actualWindowPositionVertical += 0.025;
        }

        if (this.chart.actualWindowScaleHorizontal > 0.05) {
            this.chart.actualWindowScaleHorizontal -= 0.05;
        }
        if (this.chart.actualWindowScaleVertical > 0.05) {
            this.chart.actualWindowScaleVertical -= 0.05;
        }
    }
}

new DataChartNavigation();
ts

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

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

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options horizontal">
        <div class="options vertical" style="width: 100px">
            <button id="panUp">Pan Up</button>
            <button id="panDown">Pan Down</button>
        </div>
        <div class="options vertical" style="width: 100px">
            <button id="panLeft">Pan Left</button>
            <button id="panRight">Pan Right</button>
        </div>
        <div class="options vertical" style="width: 100px">
            <button id="zoomIn">Zoom In</button>
            <button id="zoomOut">Zoom Out</button>
        </div>
        <div class="options vertical" style="width: 120px; align-self: center">
            <label class="options-label" style="margin: 5px">Pan Modifier:</label>
            <label class="options-label" style="margin: 5px">Zoom Modifier:</label>
        </div>
        <div class="options vertical" style="width: 100px">
            <select id="panModSelect" style="margin: 5px">
                <option>Alt</option>
                <option>Control</option>
                <option>Shift</option>
                <option>Windows</option>
                <option>Apple</option>
                <option>None</option>
            </select>
            <select id="dragModSelect" style="margin: 5px">
                <option>Alt</option>
                <option>Control</option>
                <option>Shift</option>
                <option>Windows</option>
                <option>Apple</option>
                <option>None</option>
            </select>
        </div>
        <div class="options vertical" style="width: 150px; align-self: center">
            <label class="options-label" style="margin: 5px;">Interaction:</label>
            <label class="options-label" style="margin: 5px;">Zooming:</label>
        </div>
        <div class="options vertical" style="width: 100px">
            <select id="interactionSelect" style="margin: 5px">
                <option>DragZoom</option>
                <option>DragPan</option>
                <option>None</option>
            </select>
            <input id="zoomEnabled" class="options-item" type="checkbox" @onchange="OnEnableZoomingChange" checked="@IsZoomingEnabled" />
        </div>
    </div>

    <div class="container vertical">
        <igc-data-chart
            id="chart"
            width="100%"
            height="100%"
            subtitle="Stock Prices Series in Candlestick Display Type"
            subtitle-top-margin="10"
            is-horizontal-zoom-enabled="true"
            is-vertical-zoom-enabled="true"
            pan-modifier="Alt"
            drag-modifier="Shift"
            default-interaction="DragPan">
            <igc-category-x-axis
                name="xAxis"
                label="Label"></igc-category-x-axis>
            <igc-numeric-y-axis
                name="yAxis"
                title="Amount (in USD)"
                title-right-margin="10"
                label-right-margin="10"
                label-horizontal-alignment="Left"
                label-location="OutsideRight"></igc-numeric-y-axis>
            <igc-financial-price-series
                x-axis-name="xAxis"
                y-axis-name="yAxis"
                display-type="Candlestick"
                open-member-path="Open"
                close-member-path="Close"
                high-member-path="High"
                low-member-path="Low"
                volume-member-path="Volume"
                show-default-tooltip="true"
                is-transition-in-enabled="true"
                title="Price"></igc-financial-price-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

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

이 샘플이 마음에 드시나요? 전체 Web Components 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

확대/축소가 기본적으로 설정되어 있는지 여부는 사용 중인 차트에 따라 다릅니다. 사용하는 IgcCategoryChartComponent 경우 기본적으로 켜져 있지만 에는 IgcDataChartComponent 없습니다. UI에서 탐색을 활성화하거나 비활성화하려면 확대/축소를 활성화하거나 비활성화하려는 방향에 따라 차트의 및/또는 isVerticalZoomEnabled 속성을 설정해야 isHorizontalZoomEnabled 합니다.

마우스를 클릭하거나 터치를 사용하여 간단히 확대/축소하거나 이동하는 것도 가능합니다. 데이터 차트의 defaultInteraction 속성은 마우스 클릭 또는 터치 이벤트에서 발생하는 상황을 결정합니다. 이 속성의 기본값은 DragZoom 이며 확대/축소가 활성화된 상태에서 이 속성으로 설정되면 클릭하고 끌면 차트의 확대/축소된 영역이 될 플롯 영역 위에 미리 보기 직사각형이 배치됩니다. 이 defaultInteraction 속성을 DragPan으로 설정하여 패닝을 허용하거나 None으로 설정하여 이러한 작업을 방지할 수도 있습니다.

Web Components 데이터 차트의 탐색은 터치, 마우스 또는 키보드로 수행할 수 있습니다. 다음 작업은 기본적으로 터치, 마우스 또는 키보드 조작을 사용하여 호출할 수 있습니다.

패닝: 키보드의 🡐 🡒 🡑 🡓 방향키를 사용하거나, Shift 키를 누른 채 마우스로 클릭하고 드래그하거나, 터치를 통해 손가락을 누르고 이동합니다.
확대: 키보드의 Page Up 키를 이용하거나, 마우스 휠을 위로 굴리거나, 핀치 터치로 확대할 수 있습니다.
축소: 키보드의 Page Down 키를 사용하거나, 마우스 휠을 아래로 굴리거나, 핀치 터치를 통해 축소합니다.
차트 플롯 영역에 맞추기: 키보드의 Home 키를 사용합니다. 이에 대한 마우스나 터치 작업은 없습니다.
영역 확대/축소: defaultInteraction 속성이 기본값인 DragZoom으로 설정된 플롯 영역 내에서 마우스를 클릭하고 드래그합니다.

dragModifier 및 panModifier 속성을 각각 설정하여 수정자 키를 사용하여 확대/축소 및 이동 작업을 활성화할 수도 있습니다. 이러한 속성은 다음 수정자 키로 설정할 수 있으며, 누르면 해당 작업이 실행됩니다.

수정자 값	해당 키
`Shift`	`옮기다`
`Control`	`Ctrl 키`
`Windows`	`이기다`
`Apple`	`사과`
`None`	열쇠 없음

verticalViewScrollbarMode 및 horizontalViewScrollbarMode 속성을 활성화하여 차트를 스크롤할 수 있습니다.

다음 옵션으로 구성할 수 있습니다.

Persistent- 차트가 확대되는 동안 스크롤 막대는 항상 표시되고 완전히 축소되면 사라집니다.
Fading- 사용 후 스크롤바가 사라지고 마우스가 해당 위치 근처에 있으면 다시 나타납니다.
FadeToLine- 확대/축소를 사용하지 않을 때 스크롤 막대가 더 얇은 선으로 줄어듭니다.
None- 기본값, 스크롤바가 표시되지 않습니다.

다음 예에서는 스크롤 막대를 활성화하는 방법을 보여줍니다.

//begin async data
export class MultipleStocks extends Array<Array<StockItem>> {
    public static async fetch(): Promise<MultipleStocks> {
        const dataSources: any[] = [
          //await this.getAmazonStock(),
          await this.getGoogleStock(),
          await this.getAmazonStock(),
          //await this.getTeslaStock()
        ];
        return new Promise<MultipleStocks>((resolve, reject) => {
        resolve(dataSources);
        });
    }

    /** gets Amazon stock OHLC prices from a .JSON file */
    public static async getAmazonStock(): Promise<StockItem[]> {
      let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
      let response = await fetch(url);
      let jsonData = await response.json();
      let stockData = this.convertData(jsonData);
      // setting data intent for Series Title, e.g. FinancialChart usage
      (stockData as any).__dataIntents = {
        close: ["SeriesTitle/Amazon"]
      };
      // console.log("fetchAmazonStock: ", stockData.length);

      return new Promise<StockItem[]>((resolve, reject) => {
        resolve(stockData);
      });
    }

    /** gets Tesla stock OHLC prices from a .JSON file */
    public static async getTeslaStock(): Promise<StockItem[]> {
      let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
      let response = await fetch(url);
      let jsonData = await response.json();
      let stockData = this.convertData(jsonData);
      // setting data intent for Series Title, e.g. FinancialChart usage
      (stockData as any).__dataIntents = {
        close: ["SeriesTitle/Tesla"]
      };
      return new Promise<StockItem[]>((resolve, reject) => {
        resolve(stockData);
      });
    }

    /** gets Microsoft stock OHLC prices from a .JSON file */
    public static async getMicrosoftStock(): Promise<StockItem[]> {
      let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
      let response = await fetch(url);
      let jsonData = await response.json();
      let stockData = this.convertData(jsonData);
      // setting data intent for Series Title, e.g. FinancialChart usage
      (stockData as any).__dataIntents = {
        close: ["SeriesTitle/Microsoft"]
      };
      return new Promise<StockItem[]>((resolve, reject) => {
        resolve(stockData);
      });
    }

    /** gets Google stock OHLC prices from a .JSON file */
    public static async getGoogleStock(): Promise<StockItem[]> {
      let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
      let response = await fetch(url);
      let jsonData = await response.json();
      let stockData = this.convertData(jsonData);
      // setting data intent for Series Title, e.g. FinancialChart usage
      (stockData as any).__dataIntents = {
        close: ["SeriesTitle/Google"]
      };
      return new Promise<StockItem[]>((resolve, reject) => {
        resolve(stockData);
      });
    }

    public static convertData(jsonData: any[]): StockItem[] {
      let stockItems: StockItem[] = [];

      for (let json of jsonData) {
        let parts = json.date.split("-"); // "2020-01-01"
        let item = new StockItem();
        item.date = new Date(parts[0], parts[1], parts[2],13,0,0);
        item.open = json.open;
        item.high = json.high;
        item.low = json.low;
        item.close = json.close;
        item.volume = json.volume;
        stockItems.push(item);

      }

      return stockItems;
    }
  }

  export class StockItem {
    public open?: number;
    public close?: number;
    public high?: number;
    public low?: number;
    public volume?: number;

    public date?: Date;

  }
//end async datats

import { IgcFinancialChartModule, IgcDataChartInteractivityModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
import { MultipleStocks } from './MultipleStocks';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcFinancialChartModule,
    IgcDataChartInteractivityModule,
    IgcLegendModule
);

export class Sample {

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

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

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

    private _multipleStocks: MultipleStocks = null;
    private _isFetching: boolean = false;
    public get multipleStocks(): MultipleStocks {
        if (this._multipleStocks == null && !this._isFetching)
        {
            this._isFetching = true;
            ( async () => { this._multipleStocks = await (await MultipleStocks.fetch()); if ((this as any)._bind) { (this as any)._bind(); }  })();
        }
        return this._multipleStocks;
    }

}

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="container fill">
        <igc-financial-chart
        name="chart"
        id="chart"
        is-toolbar-visible="false"
        is-vertical-zoom-enabled="true"
        is-horizontal-zoom-enabled="true"
        vertical-view-scrollbar-mode="Fading"
        horizontal-view-scrollbar-mode="Persistent"
        zoom-slider-type="None"
        window-rect="0, 0, 0.5, 1">
        </igc-financial-chart>
    </div>
</div>

    </div>

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

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

css

차트의 코드 탐색은 IgcDataChartComponent 컨트롤에만 사용할 수 있습니다.

Web Components 데이터 차트는 차트에서 확대/축소 또는 이동 작업이 발생할 때마다 업데이트되는 여러 탐색 속성을 제공합니다. 이러한 각 속성을 설정하여 프로그래밍 방식으로 데이터 차트를 확대/축소하거나 이동할 수도 있습니다. 다음은 이러한 속성의 목록입니다.

windowPositionHorizontal: 데이터 차트에 표시되는 콘텐츠 뷰 직사각형의 X 부분을 설명하는 숫자 값입니다.
windowPositionVertical: 데이터 차트에 표시되는 콘텐츠 뷰 직사각형의 Y 부분을 설명하는 숫자 값입니다.
windowRect: 현재 표시된 차트 부분을 나타내는 직사각형을 나타내는 Rect 객체입니다. 예를 들어 "0, 0, 1, 1"의 windowRect는 데이터 차트 전체가 됩니다.
windowScaleHorizontal: 데이터 차트에 표시되는 콘텐츠 뷰 직사각형의 너비 부분을 설명하는 숫자 값입니다.
windowScaleVertical: 데이터 차트에 표시되는 콘텐츠 뷰 직사각형의 높이 부분을 설명하는 숫자 값입니다.

추가 리소스

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

API 참조

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

Web Components 차트 탐색

Web Components 차트 탐색 예제

사용자 상호 작용을 통한 차트 탐색

터치, 마우스, 키보드를 사용한 차트 탐색

스크롤 막대를 사용한 차트 탐색

코드를 통한 차트 탐색

추가 리소스

API 참조