React 주식 차트

Ignite UI for React 주식 차트는 React 금융 차트 또는 캔들스틱 차트라고도 하며, 주식 시세 데이터 또는 가격 데이터를 대화형 시계열 디스플레이로 렌더링하는 복합 시각화입니다. 주식 차트는 시계열 X축에 시간 경과에 따른 시세의 주가를 표시합니다. 또한 이 차트는 구성 가능한 기간 동안 시초가, 고가, 저가, 종가(OHLC)와 같은 회사의 시세 데이터에 대한 정보를 표시합니다. 주식 차트는 가격 및 거래량 표시 모드와 다양한 주식 지표를 포함해 데이터를 시각화하고 해석할 수 있는 다양한 방법을 제공합니다.

React Stock Chart Example

아래 예제와 같이 데이터를 바인딩하고 선택적으로 chartType 속성을 Line 값으로 설정하여 IgrFinancialChart 컨트롤을 사용하여 주식형 차트를 만들 수 있습니다.

Stock Chart Recommendations

Are React Stock Charts right for your project?

일반적인 주식형 차트는 가격 범위의 기술적 분석에 사용되는 캔들차트의 티커 데이터로 표시됩니다. 캔들스틱 차트는 하루의 최고가와 최저가를 티커 기호의 시가와 종가와 비교합니다.

캔들스틱 차트의 본문에는 시가 및 종가 거래 가치(O/C)가 표시됩니다.
캔들차트의 심지는 거래가격의 고가와 저가(H/L)를 나타냅니다.
티커 값의 상단과 하단 사이의 거리가 티커 가격의 날짜 범위입니다.
자산이 시가보다 높게 마감되면 캔들스틱 차트 티커 값은 비어 있습니다.
자산이 시가보다 낮게 마감되면 캔들스틱 차트 티커 값이 채워집니다.
검은색 또는 빨간색 양초는 이전 양초의 종가보다 종가가 낮은 가격을 나타냅니다.
흰색 또는 녹색 양초는 이전 양초의 종가보다 높은 종가를 나타냅니다.

주식 차트는 다음 중 하나를 표시하도록 설정할 수 있습니다.

촛대 차트
바 차트
기둥 차트
선형 차트

주식 차트는 사용자가 데이터 분석 기능을 수행할 수 있도록 하기 위한 것이므로 다음과 같은 대화형 요소가 포함되어 있습니다.

시간 기반 필터
가격 보기
볼륨 보기
지표 보기
추세선
탐색/줌바 보기

Stock Chart Data Structure:

데이터 소스는 데이터 항목의 배열 또는 목록이어야 합니다.
데이터 소스에는 데이터 항목이 하나 이상 포함되어 있어야 합니다.
모든 데이터 항목에는 티커 데이터의 날짜를 나타내는 날짜-시간(또는 문자열) 열이 하나 이상 포함되어야 합니다.
막대형, 선형 및 기둥형 차트의 경우 모든 데이터 항목에는 숫자 열 1개가 포함되어야 합니다.
모든 데이터 항목에는 캔들스틱 차트의 시가, 고가, 저가, 종가(OHLC)에 대한 4개의 숫자 열이 포함되어야 합니다.
모든 데이터 항목에는 캔들스틱 차트의 시가, 고가, 저가, 종가 및 거래량에 대한 5개의 숫자 열이 포함되어야 합니다.

React Stock Chart with Multiple Series

React 주식 차트

이 예에서 주식 차트는 1년 동안의 S&P 500을 나타냅니다. 투자자에게 유용하며 기술적 분석을 수행하고 향후 가격 책정/보고서를 예측합니다.

React Stock Chart Styling

다른 시리즈 합성과 같은 더 많은 기능이 포함된 주식형 차트가 필요한 경우 아래 설명된 대로 두께, 윤곽선, 브러시, 음수 윤곽선, 음수 브러시를 구성할 수 있습니다. 이 예에서 주식형 차트는 Amazon, Microsoft 및 Tesla 간의 수익을 비교하고 있습니다.

React Chart Annotations

Crosshair Annotation Layer는 모든 대상 계열의 실제 값에서 만나는 교차선을 제공합니다. 십자선 유형에는 수평, 수직 및 모두가 포함됩니다. crosshairsSnapToData 속성을 true로 설정하여 데이터 포인트에 스냅되도록 십자선을 구성할 수도 있습니다. 그렇지 않으면 십자선이 데이터 포인트 사이에 보간됩니다. 축을 따라 십자선 값을 표시하도록 주석을 활성화할 수도 있습니다.

최종 가치 레이어는 시리즈에 표시된 최종 가치의 축을 따라 빠른 보기를 제공합니다.

콜아웃 레이어는 X/Y 위치에 콜아웃을 표시합니다.

참고: 순서형 X축 모드를 사용하는 경우 CalloutsXMemberPath는 항목의 숫자 인덱스를 가리켜야 하며, 그렇지 않으면 CalloutsXMemberPath는 시간 값을 가리켜야 합니다.

React Chart Panes

다음 창을 사용할 수 있습니다.

가격 창 - 선, 촛대, 막대(OHLC), 추세선 및 재무 오버레이를 사용하여 가격을 렌더링합니다.
표시 창 - BollingerBands 및 PriceChannel 오버레이가 Y축에서 동일한 값 범위를 공유하기 때문에 가격 창에 렌더링되는 동안 모든 재무 지표를 별도의 차트로 렌더링합니다.
볼륨 창 - 위의 모든 창 아래에 기둥형, 선 및 영역형 차트 유형을 사용하여 주식 볼륨을 렌더링합니다.
확대/축소 창 - 모든 창의 확대/축소를 제어하며 항상 차트 하단에 렌더링됩니다.

Indicator Pane

재무 지표는 거래자가 변화를 측정하고 주가 추세를 표시하는 데 자주 사용됩니다. 이러한 지표는 동일한 Y축 척도를 공유하지 않기 때문에 일반적으로 가격 창 아래에 표시됩니다.

기본적으로 표시기 창은 표시되지 않습니다. 도구 모음을 사용하면 최종 사용자가 런타임에 표시할 표시기를 선택할 수 있습니다. 처음에 표시기 창을 표시하려면 다음 코드에 설명된 대로 indicatorTypes 유형 속성을 하나 이상의 표시기 유형으로 설정해야 합니다.

Volume Pane

볼륨 창은 특정 기간 동안 거래된 주식 수를 나타냅니다. 거래량이 적다는 것은 관심이 거의 없다는 것을 의미하고, 거래량이 많다는 것은 거래가 많아 관심이 높다는 것을 의미합니다. 이는 세로 막대형, 선형 또는 영역형 차트 유형을 사용하여 표시할 수 있습니다. 도구 모음을 사용하면 최종 사용자가 런타임 시 데이터를 렌더링할 차트 유형을 선택하여 볼륨 창을 표시할 수 있습니다. 창을 표시하려면 다음 코드에 설명된 대로 볼륨 유형을 설정해야 합니다.

Price Pane

이 창에는 주가가 표시되고 시간 경과에 따른 주식의 고가, 저가, 시가 및 종가가 표시됩니다. 또한 추세선과 오버레이도 표시할 수 있습니다. 최종 사용자는 도구 모음에서 다양한 차트 유형을 선택할 수 있습니다. 기본적으로 차트 유형은 Auto로 설정됩니다. 다음 코드에 설명된 대로 기본 설정을 재정의할 수 있습니다.

여러 데이터 소스를 그리는 경우나 데이터 포인트가 많은 데이터 소스를 그리는 경우 꺾은선형 차트 유형을 사용하는 것이 좋습니다.

Zoom Pane

이 창은 표시된 모든 창의 확대/축소를 제어합니다. 이 창은 기본적으로 표시됩니다. 다음 코드에 설명된 대로 zoomSliderType none으로 설정하여 끌 수 있습니다.

zoomSliderType 옵션은 chartType 옵션이 설정된 것과 동일한 값으로 설정해야 합니다. 이렇게 하면 줌 슬라이더에 가격 창의 올바른 미리보기가 표시됩니다. 다음 코드는 이를 수행하는 방법을 보여줍니다.

이 예에서 주식형 차트는 미국에 대한 수익을 표시하고 있습니다.

Additional Resources

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

API References

다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.