React 차트 추세선

Ignite UI for React에서 추세선은 추세를 식별하거나 데이터에서 패턴을 찾는 데 도움이 됩니다. 추세선은 항상 차트에 바인딩된 데이터 포인트 앞에 렌더링되며 IgrCategoryChart, IgrFinancialChart 및 IgrDataChart에서 지원됩니다(스택 시리즈, 모양 시리즈 및 범위 시리즈 제외).

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

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

React 차트 추세선 예시

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

EXAMPLE

DATA

TSX

export default 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 React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrFinancialChart } from "@infragistics/igniteui-react-charts";
import { IgrFinancialChartModule } from "@infragistics/igniteui-react-charts";
import StocksHistory from './StocksHistory';

IgrFinancialChartModule.register();

export default class FinancialChartTrendlines extends React.Component<any, any> {

    public data: any[];

    constructor(props: any) {
        super(props);

        this.state = { trendLineType: "QuinticFit", data:[] }
        this.initData();
    }

    public render(): JSX.Element {
        return (
        <div className="container sample">
            <div className="options horizontal">
                <label className="options-label">Trendlines:</label>
                <select value={this.state.trendLineType}
                    onChange={this.onTrendlineChanged}>
                    <option>CubicFit</option>
                    <option>LinearFit</option>
                    <option>QuinticFit</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 className="container" style={{height: "calc(100% - 65px)"}}>
                <IgrFinancialChart
                    width="100%"
                    height="100%"
                    chartType="Bar"
                    thickness={2}
                    trendLineType={this.state.trendLineType}
                    trendLineThickness={2}
                    trendLinePeriod={10}
                    trendLineBrushes="rgba(0, 101, 209, 1)"
                    chartTitle="Microsoft Trend"
                    subtitle="Between 2013 and 2017"
                    dataSource={this.state.data}
                    zoomSliderType="None"
                    isHorizontalZoomEnabled={false}
                    isVerticalZoomEnabled={false} />
            </div>
        </div>
        );
    }

    public onTrendlineChanged = (e: any) =>{
        const mode = e.target.value;
        this.setState({trendLineType: mode});
    }

    public initData() {
        StocksHistory.getMicrosoftStock().then((stocks: any[]) => {
            this.setState({ data: stocks });
        });
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FinancialChartTrendlines/>);
tsxコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

React 차트 추세선 대시 배열 예제

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

EXAMPLE

DATA

TSX

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 React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartCategoryCoreModule, IgrDataChartCategoryTrendLineModule, IgrDataChartFinancialCoreModule, IgrDataChartFinancialModule, IgrDataChartFinancialOverlaysModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule } from "@infragistics/igniteui-react-charts";
import { IgrDataChart, IgrCategoryXAxis, IgrNumericYAxis, IgrFinancialPriceSeries } from "@infragistics/igniteui-react-charts";
import { Stock2YearsItem, Stock2Years } from './Stock2Years';

const mods: any[] = [
    IgrDataChartCoreModule,
    IgrDataChartCategoryModule,
    IgrDataChartCategoryCoreModule,
    IgrDataChartCategoryTrendLineModule,
    IgrDataChartFinancialCoreModule,
    IgrDataChartFinancialModule,
    IgrDataChartFinancialOverlaysModule,
    IgrDataChartInteractivityModule,
    IgrDataChartAnnotationModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private chart: IgrDataChart
    private chartRef(r: IgrDataChart) {
        this.chart = r;
        this.setState({});
    }
    private xAxis: IgrCategoryXAxis
    private yAxis: IgrNumericYAxis
    private series1: IgrFinancialPriceSeries

    constructor(props: any) {
        super(props);

        this.chartRef = this.chartRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample">

            <div className="container fill">
                <IgrDataChart
                    ref={this.chartRef}
                    shouldAutoExpandMarginForInitialLabels="true"
                    computedPlotAreaMarginMode="Series"
                    isVerticalZoomEnabled="true"
                    isHorizontalZoomEnabled="true">
                    <IgrCategoryXAxis
                        name="xAxis"
                        dataSource={this.stock2Years}
                        labelLocation="OutsideBottom"
                        label="month"
                        interval="1"
                        labelExtent="30">
                    </IgrCategoryXAxis>
                    <IgrNumericYAxis
                        name="yAxis"
                        labelLocation="OutsideRight">
                    </IgrNumericYAxis>
                    <IgrFinancialPriceSeries
                        name="Series1"
                        title="Stock Price"
                        displayType="Candlestick"
                        xAxisName="xAxis"
                        yAxisName="yAxis"
                        dataSource={this.stock2Years}
                        openMemberPath="open"
                        highMemberPath="high"
                        lowMemberPath="low"
                        closeMemberPath="close"
                        volumeMemberPath="volume"
                        showDefaultTooltip="true"
                        trendLineType="QuarticFit"
                        trendLineBrush="dodgerblue"
                        trendLineDashArray="5, 5">
                    </IgrFinancialPriceSeries>
                </IgrDataChart>
            </div>
        </div>
        );
    }

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

}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsxコピー

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

Edit in: Codesandbox

React 차트 추세선 레이어

는 TrendLineLayer 대상 계열에 대한 단일 추세선 유형을 표시하도록 설계된 계열 유형입니다. 이 추세선 기능과 기존 계열 유형의 기존 추세선 기능의 차이점은 계열 TrendLineLayer 유형이기 때문에 차트 컬렉션에 IgrSeries 둘 이상의 추세선을 추가하여 동일한 계열에 여러 추세선을 연결할 수 있다는 것입니다. 또한 이전에는 불가능했던 추세선을 범례에 표시할 수 있습니다.

추세선 레이어 사용

제대로 TrendLineLayer 작동하려면 a TargetSeries와 a trendLineType가 제공되어야 합니다. 사용할 수 있는 다양한 추세선 유형은 시리즈에서 사용할 수 있는 추세선과 동일합니다.

범례에 표시하려면 TrendLineLayer 속성을 다음과 true 같이 설정하면 UseLegend 됩니다.

추세선 레이어 스타일링

기본적으로 파 TrendLineLayer 선과 동일한 색상으로 TargetSeries 렌더링됩니다. 이는 의 다양한 스타일링 속성을 사용하여 구성할 수 있습니다 TrendLineLayer.

그려진 추세선의 색상을 변경하려면 brush 재산. 또는 다음을 설정할 수도 있습니다. UseIndex 속성을 true, 차트의 brushes palette 는 TrendLineLayer 차트의 IgrSeries 수집.

또한 및 ShiftAmount 속성을 사용하여 표시되는 TrendLineLayer 방식을 수정할 수 있습니다 AppearanceMode. -ShiftAmount 1.0에서 1.0 사이의 값을 사용하여 "Shift"로 끝나는 옵션에 적용할 "shift"의 양을 결정합니다.

속성에 대한 옵션은 다음과 같습니다 AppearanceMode.

• Auto: 기본적으로 DashPattern 열거형으로 설정됩니다.
• BrightnessShift: 추세선은 브러시를 TargetSeries 가져와서 제공된 ShiftAmount 밝기에 따라 밝기를 수정합니다.
• DashPattern: 추세선이 파선으로 표시됩니다. 대시의 빈도는 다음을 사용하여 수정할 수 있습니다. dashArray 속성을 TrendLineLayer.
• OpacityShift: 추세선은 브러시를 TargetSeries 가져와 제공된 ShiftAmount 브러시에 따라 불투명도를 수정합니다.
• SaturationShift: 추세선은 브러시를 TargetSeries 가져와 제공된 ShiftAmount 것에 따라 채도를 수정합니다.

추가 리소스

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

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

API 참조

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

• trendLineBrushes
• trendLinePeriod
• trendLineThickness
• trendLineType

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

• trendLineBrush
• trendLineDashArray
• trendLinePeriod
• trendLineThickness
• trendLineType