Web Components 차트 추세선

Ignite UI for Web Components 차트에서 추세선은 추세를 식별하거나 데이터에서 패턴을 찾는 데 도움이 됩니다. 추세선은 항상 차트에 바인딩된 데이터 요소 앞에 렌더링되며 , IgcFinancialChartComponent, and IgcDataChartComponent (누적 계열, 모양 계열 및 범위 계열 제외)에 의해 IgcCategoryChartComponent 지원됩니다.

추세선은 기본적으로 꺼져 있지만 trendLineType 속성을 설정하여 활성화할 수 있습니다. 또한 브러시, 기간 및 두께와 같은 추세선의 여러 모양 속성을 수정할 수 있습니다.

추세선에는 활성화된 후 대시 배열을 적용할 수 있는 기능도 있습니다. TrendLineDashArray 속성을 숫자 배열로 설정하면 됩니다. 숫자형 배열은 추세선 대시의 길이를 나타냅니다.

Web Components 차트 추세선 예제

다음 샘플은 IgcFinancialChartComponent 2013년에서 2017년 사이의 Microsoft의 주식 추세를 QuinticFit 추세선이 처음 적용된 상태로 보여 줍니다. 적용되는 추세선의 유형을 변경할 수 있는 드롭다운이 있으며 가능한 모든 추세선 유형이 해당 드롭다운에 나열됩니다.

EXAMPLE

DATA

TS

HTML

CSS

export class StocksHistory {
  /** gets stock OHLC prices for multiple stocks */

  public static async getMultipleStocks(): Promise<any[]> {
    // getting prices of multiples stocks asynchronously
    const dataSources: any[] = [
      //await this.getAmazonStock(),
      await this.getGoogleStock(),
      await this.getMicrosoftStock(),
      //await this.getTeslaStock()
    ];

    return new Promise<any[]>((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]);
      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;

}
tsコピー

import { IgcFinancialChartModule } from 'igniteui-webcomponents-charts';
import { IgcFinancialChartComponent } from 'igniteui-webcomponents-charts';
import { TrendLineType } from 'igniteui-webcomponents-core';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { StocksHistory } from './StocksHistory';

ModuleManager.register(IgcFinancialChartModule);

export class FinancialChartTrendlines {

    private chart: IgcFinancialChartComponent;
    public trendLineType: TrendLineType = TrendLineType.QuinticFit;

    constructor() {

        this.chart = document.getElementById('chart') as IgcFinancialChartComponent;
        this.chart.trendLineType = this.trendLineType;

        let trendLineSelect = document.getElementById('trendLineSelect');
        trendLineSelect!.addEventListener('change', this.onTrendlineChanged);

        StocksHistory.getMicrosoftStock().then((stocks: any[]) => {
            this.chart.dataSource = stocks;
        });
    }

    public onTrendlineChanged = (e: any) => {
        const type = e.target.value;
        switch (type) {
            case 'CubicFit':
                this.trendLineType = TrendLineType.CubicFit;
            break;
            case 'LinearFit':
                this.trendLineType = TrendLineType.LinearFit;
            break;
            case 'QuinticFit':
                this.trendLineType = TrendLineType.QuinticFit;
            break;
            case 'QuarticFit':
                this.trendLineType = TrendLineType.QuarticFit;
            break;
            case 'ExponentialFit':
                this.trendLineType = TrendLineType.ExponentialFit;
            break;
            case 'PowerLawFit':
                this.trendLineType = TrendLineType.PowerLawFit;
            break;
            case 'LogarithmicFit':
                this.trendLineType = TrendLineType.LogarithmicFit;
            break;
            case 'CumulativeAverage':
                this.trendLineType = TrendLineType.CumulativeAverage;
            break;
            case 'ExponentialAverage':
                this.trendLineType = TrendLineType.ExponentialAverage;
            break;
            case 'SimpleAverage':
                this.trendLineType = TrendLineType.SimpleAverage;
            break;
            case 'ModifiedAverage':
                this.trendLineType = TrendLineType.ModifiedAverage;
            break;
            case 'WeightedAverage':
                this.trendLineType = TrendLineType.WeightedAverage;
            break;
            case 'None':
                this.trendLineType = TrendLineType.None;
            break;
        }
        this.chart.trendLineType = this.trendLineType;
    }
}

new FinancialChartTrendlines();
tsコピー

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

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

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options horizontal">
        <label class="options-label">Trendline Type:</label>
        <select id="trendLineSelect">
            <option>QuinticFit</option>
            <option>CubicFit</option>
            <option>LinearFit</option>
            <option>QuarticFit</option>
            <option>ExponentialFit</option>
            <option>PowerLawFit</option>
            <option>LogarithmicFit</option>
            <option>CumulativeAverage</option>
            <option>ExponentialAverage</option>
            <option>SimpleAverage</option>
            <option>ModifiedAverage</option>
            <option>WeightedAverage</option>
            <option>None</option>
        </select>
    </div>

    <div class="container" style="height: calc(100% - 3rem)">
        <igc-financial-chart id="chart" width="100%" height="100%"
            chart-type="Bar"
            thickness="2"
            trend-line-thickness="2"
            trend-line-period="10"
            trend-line-brushes="rgba(0, 101, 209, 1)"
            chart-title="Microsoft Trend"
            subtitle="Between 2013 and 2017"
            zoom-slider-type="None"
            is-horizontal-zoom-enabled="false"
            is-vertical-zoom-enabled="false"
            >
        </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コピー

Edit in: Codesandbox

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

Web Components 차트 추세선 Dash Array 예제

다음 샘플에서는 IgcDataChartComponent 표시 IgcFinancialPriceSeriesComponent와 함께 쿼틱핏(QuarticFit)를 통해 적용된 점선 추세선 trendLineDashArray 재산:

EXAMPLE

DATA

TS

HTML

CSS

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

    public month: string;
    public open: number;
    public high: number;
    public low: number;
    public close: number;
    public volume: number;

}
export class Stock2Years extends Array<Stock2YearsItem> {
    public constructor(items: Array<Stock2YearsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new Stock2YearsItem(
                {
                    month: `2020`,
                    open: 41.1,
                    high: 41.6,
                    low: 41.1,
                    close: 41.4,
                    volume: 32610
                }),
                new Stock2YearsItem(
                {
                    month: `FEB`,
                    open: 41.4,
                    high: 41.7,
                    low: 41.2,
                    close: 41.4,
                    volume: 28666
                }),
                new Stock2YearsItem(
                {
                    month: `MAR`,
                    open: 41.3,
                    high: 41.3,
                    low: 40.7,
                    close: 41,
                    volume: 30139
                }),
                new Stock2YearsItem(
                {
                    month: `APR`,
                    open: 41.3,
                    high: 41.4,
                    low: 39.6,
                    close: 39.9,
                    volume: 51409
                }),
                new Stock2YearsItem(
                {
                    month: `MAY`,
                    open: 40,
                    high: 40.3,
                    low: 39.7,
                    close: 39.8,
                    volume: 37559
                }),
                new Stock2YearsItem(
                {
                    month: `JUN`,
                    open: 39.8,
                    high: 39.9,
                    low: 39.2,
                    close: 39.8,
                    volume: 35919
                }),
                new Stock2YearsItem(
                {
                    month: `JUL`,
                    open: 39.9,
                    high: 40.5,
                    low: 39.9,
                    close: 40.5,
                    volume: 27398
                }),
                new Stock2YearsItem(
                {
                    month: `AUG`,
                    open: 40.4,
                    high: 40.7,
                    low: 39.1,
                    close: 39.4,
                    volume: 45960
                }),
                new Stock2YearsItem(
                {
                    month: `SEP`,
                    open: 39,
                    high: 39.8,
                    low: 39,
                    close: 39.2,
                    volume: 34333
                }),
                new Stock2YearsItem(
                {
                    month: `OCT`,
                    open: 39.1,
                    high: 39.4,
                    low: 38.9,
                    close: 39.2,
                    volume: 32006
                }),
                new Stock2YearsItem(
                {
                    month: `NOV`,
                    open: 39.3,
                    high: 40,
                    low: 39,
                    close: 39.8,
                    volume: 33978
                }),
                new Stock2YearsItem(
                {
                    month: `DEC`,
                    open: 40.1,
                    high: 40.4,
                    low: 39.9,
                    close: 40.4,
                    volume: 30616
                }),
                new Stock2YearsItem(
                {
                    month: `2021`,
                    open: 40,
                    high: 40.2,
                    low: 39.5,
                    close: 40,
                    volume: 36689
                }),
                new Stock2YearsItem(
                {
                    month: `FEB`,
                    open: 40.1,
                    high: 40.1,
                    low: 39.8,
                    close: 39.9,
                    volume: 22222
                }),
                new Stock2YearsItem(
                {
                    month: `MAR`,
                    open: 40,
                    high: 40.1,
                    low: 39.8,
                    close: 40,
                    volume: 27057
                }),
                new Stock2YearsItem(
                {
                    month: `APR`,
                    open: 40,
                    high: 40,
                    low: 39.5,
                    close: 39.7,
                    volume: 24602
                }),
                new Stock2YearsItem(
                {
                    month: `MAY`,
                    open: 39.7,
                    high: 40,
                    low: 39.3,
                    close: 39.9,
                    volume: 42381
                }),
                new Stock2YearsItem(
                {
                    month: `JUN`,
                    open: 40.3,
                    high: 40.7,
                    low: 39.8,
                    close: 39.9,
                    volume: 56883
                }),
                new Stock2YearsItem(
                {
                    month: `JUL`,
                    open: 40.1,
                    high: 41.3,
                    low: 40.1,
                    close: 40.9,
                    volume: 50610
                }),
                new Stock2YearsItem(
                {
                    month: `AUG`,
                    open: 41.1,
                    high: 41.2,
                    low: 40.4,
                    close: 40.5,
                    volume: 29637
                }),
                new Stock2YearsItem(
                {
                    month: `SEP`,
                    open: 39,
                    high: 39.8,
                    low: 39,
                    close: 39.2,
                    volume: 34333
                }),
                new Stock2YearsItem(
                {
                    month: `OCT`,
                    open: 39.1,
                    high: 39.4,
                    low: 38.9,
                    close: 39.2,
                    volume: 32006
                }),
                new Stock2YearsItem(
                {
                    month: `NOV`,
                    open: 39.3,
                    high: 40,
                    low: 39,
                    close: 39.8,
                    volume: 33978
                }),
                new Stock2YearsItem(
                {
                    month: `DEC`,
                    open: 40.1,
                    high: 40.4,
                    low: 39.9,
                    close: 40.4,
                    volume: 30616
                }),
            ];
            super(...(newItems.slice(0, items)));
        }
    }
}
tsコピー

import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryTrendLineModule, IgcDataChartFinancialCoreModule, IgcDataChartFinancialModule, IgcDataChartFinancialOverlaysModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcFinancialPriceSeriesComponent } from 'igniteui-webcomponents-charts';
import { Stock2YearsItem, Stock2Years } from './Stock2Years';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartCategoryCoreModule,
    IgcDataChartCategoryTrendLineModule,
    IgcDataChartFinancialCoreModule,
    IgcDataChartFinancialModule,
    IgcDataChartFinancialOverlaysModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule
);

export class Sample {

    private chart: IgcDataChartComponent
    private xAxis: IgcCategoryXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private series1: IgcFinancialPriceSeriesComponent
    private _bind: () => void;

    constructor() {
        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 series1 = this.series1 = document.getElementById('Series1') as IgcFinancialPriceSeriesComponent;

        this._bind = () => {
            xAxis.dataSource = this.stock2Years;
            series1.xAxis = this.xAxis;
            series1.yAxis = this.yAxis;
            series1.dataSource = this.stock2Years;
        }
        this._bind();
    }

    private _stock2Years: Stock2Years = null;
    public get stock2Years(): Stock2Years {
        if (this._stock2Years == null)
        {
            this._stock2Years = new Stock2Years();
        }
        return this._stock2Years;
    }

}

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-data-chart
        name="chart"
        id="chart"
        should-auto-expand-margin-for-initial-labels="true"
        computed-plot-area-margin-mode="Series"
        is-vertical-zoom-enabled="true"
        is-horizontal-zoom-enabled="true">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label-location="OutsideBottom"
            label="month"
            interval="1"
            label-extent="30">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="yAxis"
            id="yAxis"
            label-location="OutsideRight">
            </igc-numeric-y-axis>
            <igc-financial-price-series
            name="Series1"
            id="Series1"
            title="Stock Price"
            display-type="Candlestick"
            open-member-path="open"
            high-member-path="high"
            low-member-path="low"
            close-member-path="close"
            volume-member-path="volume"
            show-default-tooltip="true"
            trend-line-type="QuarticFit"
            trend-line-brush="dodgerblue"
            trend-line-dash-array="5, 5">
            </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コピー

Edit in: Codesandbox

추가 리소스

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

• 차트 주석
• 차트 하이라이트

API 참조

​IgcCategoryChartComponent 및 IgcFinancialChartComponent 구성요소는 다음 API 속성을 공유합니다.

• trendLineBrushes
• trendLinePeriod
• trendLineThickness
• trendLineType

​IgcDataChartComponent 구성 요소에서 대부분의 계열 유형에는 다음과 같은 API 속성이 있습니다.

• trendLineBrush
• trendLineDashArray
• trendLinePeriod
• trendLineThickness
• trendLineType