React 선형 차트

    Ignite UI for React 선형 차트 또는 선 그래프는 일정 기간 동안 하나 이상의 수량의 직선 세그먼트로 연결된 점으로 표시되는 연속 데이터 값을 보여주는 범주형 차트의 한 유형입니다. 추세를 표시하고 비교 분석을 수행하는 데 자주 사용됩니다. Y축(왼쪽의 레이블)은 숫자 값을 표시하고, X축(아래쪽 레이블)은 시계열 또는 비교 범주를 표시합니다. 비교할 데이터 집합을 하나 이상 포함할 수 있으며, 이 경우 차트에 여러 개의 선으로 렌더링됩니다.

    React Line Chart Example

    에서 React 선형 차트 만들 수 있습니다. IgrCategoryChart 데이터를 바인딩하여 제어 ItemsSource 속성 및 설정 chartType property 를 Line enum을 사용합니다.

    Line Chart Recommendations

    Are React Line Charts right for your project?

    • ​영역 차트와 달리 선 차트는 X축(하단 축)과 선 사이의 영역을 채우지 않습니다.
    • React 라인 차트는 데이터 포인트를 연결하는 라인에 데이터 표시 개선을 위한 스플라인 보간 및 평활화가 없다는 점을 제외하면 모든 측면에서 React 스플라인 차트와 동일합니다.

    선형 차트 데이터를 기반으로 한 여러 변형 또는 데이터로 올바른 스토리를 전달하려는 방법이 포함되어 있습니다. 여기에는 다음이 포함됩니다.

    • 계층형 꺾은 선형 차트
    • 누적 선형 차트
    • 계단형 꺾은 선형 차트
    • 극선 선형 차트
    • 누적 100 선형 차트

    Line Chart Use Cases

    선형 차트 선택하는 데는 몇 가지 일반적인 사용 사례가 있습니다.

    • 패닝, 확대/축소, 드릴다운과 같은 차트 상호 작용에 잘 맞는 대용량 데이터 세트를 보유하세요.
    • 시간에 따른 추세를 비교해야 합니다.
    • 2개 이상의 데이터 계열 간의 차이점을 표시하고 싶습니다.
    • 개별 범주의 누적된 부분 대 전체 비교를 표시하려고 합니다.
    • 비교 분석을 위해 하나 이상의 범주에 대한 데이터 추세를 표시해야 합니다.
    • 상세한 시계열 데이터를 시각화해야 합니다.

    Line Chart Best Practices:

    • 데이터 비교가 정확하도록 항상 Y축(왼쪽 또는 오른쪽 축)을 0에서 시작합니다.
    • 시계열 데이터를 왼쪽에서 오른쪽으로 정렬합니다.
    • 일련의 데이터를 표시하려면 실선과 같은 시각적 속성을 사용하세요.

    When Not to Use Line Chart

    • 7개 또는 10개 이상의 데이터 계열이 있습니다. 당신의 목표는 차트를 읽을 수 있는지 확인하는 것입니다.
    • 시계열 데이터는 유사한 값(동일 기간의 데이터)을 가지므로 중복된 선을 구별할 수 없습니다.

    Line Chart Data Structure:

    • 데이터 소스는 데이터 항목의 배열 또는 목록이어야 합니다(단일 계열의 경우).
    • 데이터 소스는 배열의 배열 또는 목록의 목록(여러 계열의 경우)이어야 합니다.
    • 데이터 소스에는 데이터 항목이 하나 이상 포함되어 있어야 합니다.
    • 모든 데이터 항목에는 하나 이상의 데이터 열(문자열 또는 날짜 시간)이 포함되어야 합니다.
    • 모든 데이터 항목에는 숫자 데이터 열이 하나 이상 포함되어야 합니다.

    React Line Chart with Single Series

    React 선형 차트 아래 예에서 볼 수 있듯이 2009년부터 10년 동안 생산된 재생 가능한 전기량과 같이 시간에 따른 값의 변화를 표시하는 데 자주 사용됩니다.

    아래 예제와 같이 데이터를 바인딩하고 속성을 로 설정하여 chartType 컨트롤에서 IgrCategoryChart 이러한 유형의 차트를 만들 수 있습니다. Line​

    React Line Chart with Multiple Series

    React 선형 차트을 사용하면 여러 계열을 결합하여 시간에 따라 어떻게 변화하는지 비교하거나 확인할 수 있으므로, 이 작업을 얼마나 쉽게 수행할 수 있는지 살펴보겠습니다. 중국과 미국에 대한 데이터가 포함된 데이터 원본에 바인딩하기만 하면 라인 차트가 추가 데이터에 맞게 자동으로 업데이트됩니다.

    아래 예제와 같이 데이터를 바인딩하고 속성을 로 설정하여 chartType 컨트롤에서 IgrCategoryChart 이러한 유형의 차트를 만들 수 있습니다. Line​

    React Line Chart with Live Data

    React Line 차트는 수백만 개의 데이터 포인트에 이르는 대용량 데이터를 처리하고 다음 데모에서 설명한 것처럼 몇 밀리초마다 업데이트할 수 있습니다.

    이 예에서는 선택한 간격에 따라 실시간 데이터를 React 선형 차트로 스트리밍합니다. 데이터 포인트를 5,000에서 100만까지 설정하고 차트를 업데이트하여 차트를 렌더링하는 장치에 따라 척도를 최적화할 수 있습니다.

    아래 예제와 같이 데이터를 바인딩하고 속성을 로 설정하여 chartType 컨트롤에서 IgrCategoryChart 이러한 유형의 차트를 만들 수 있습니다. Line​

    React Styling Line Chart

    차트가 설정되면 선 색상 변경, 범례 글꼴 모음 변경 및/또는 읽기 쉽도록 축 레이블 크기 늘리기와 같은 추가 스타일 사용자 정의를 수행할 수 있습니다.

    아래 예제와 같이 데이터를 바인딩하고 속성을 로 설정하여 chartType 컨트롤에서 IgrCategoryChart 이러한 유형의 차트를 만들 수 있습니다. Line​

    ​IgrDataChart 사용하고 계열에 dashArray 속성을 설정하여 IgrLineSeries 내에 점선을 만들 수도 있습니다. 이 속성은 줄에서 결과 대시의 길이를 설명하는 숫자 배열을 사용합니다.

    다음 예에서는 IgrDataChart의 IgrLineSeries에서 dashArray 사용하는 방법을 보여줍니다.

    Advanced Types of Line Charts

    다음 섹션에서는 단순화된 API를 사용하여 IgrCategoryChart 컨트롤 대신 IgrDataChart 컨트롤을 사용하여 생성할 수 있는 고급 유형의 React Line Charts를 설명합니다.

    React Stacked Line Chart

    누적 선형 차트 지역 간 몇 년 동안 생산된 재생 가능 전력량과 같이 시간에 따른 값의 변화를 표시하는 데 자주 사용됩니다. 아래 예제와 같이 데이터를 IgrStackedLineSeries에 바인딩하여 IgrDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

    React Stacked 100% Line Chart

    누적 100% 꺾은 선형 차트 y축 값 처리를 제외하고 모든 측면에서 누적 꺾은 선형 차트와 동일합니다. 100% 누적 꺾은 선형 차트 데이터를 직접적으로 표시하는 대신 데이터 포인트의 모든 값 합계에 대한 백분율로 데이터를 표시합니다. 아래 예는 태블릿, 휴대폰, 개인용 컴퓨터를 통한 부서별 온라인 쇼핑 트래픽에 대한 연구를 보여줍니다.

    아래 예제와 같이 데이터를 IgrStacked100LineSeries에 바인딩하여 IgrDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

    React Radial Line Chart

    방사형 선형 차트 방사형 차트 그룹에 속하며 데이터 포인트를 연결하는 직선 모음으로 둘러싸인 채워지지 않은 다각형의 모양을 갖습니다. 이 차트 유형은 선형 차트와 동일한 데이터 그리기 개념을 사용하지만 데이터 포인트를 가로로 늘리는 대신 원형 축을 중심으로 둘러쌉니다.

    아래 예제와 같이 데이터를 IgrRadialLineSeries에 바인딩하여 IgrDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

    React Polar Line Chart

    극선 차트(Polar 선형 차트 극좌표 차트 그룹에 속하며 극(각도/반지름) 좌표계에서 데이터 포인트를 연결하는 직선 모음을 사용하여 렌더링됩니다. 극선 차트는 분산 선형 차트와 동일한 데이터 플로팅 개념을 사용하지만 시각화는 데이터 포인트를 수평으로 늘리지 않고 원 주위로 둘러쌉니다.

    아래 예제와 같이 데이터를 IgrPolarLineSeries에 바인딩하여 IgrDataChart 컨트롤에서 이러한 유형의 차트를 만들 수 있습니다.

    Additional Resources

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

    API References

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

    차트 종류 컨트롤 이름 API 회원
    선 IgrCategoryChart chartType = Line
    극선 IgrDataChart IgrPolarLineSeries
    방사형 라인 IgrDataChart IgrRadialLineSeries
    누적선 IgrDataChart IgrStackedLineSeries
    누적 100% 라인 IgrDataChart IgrStacked100LineSeries