Blazor 선형 차트

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

    Blazor Line Chart Example

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

    Line Chart Recommendations

    Are Blazor Line Charts right for your project?

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

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

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

    Line Chart Use Cases

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

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

    Line Chart Best Practices:

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

    When Not to Use Line Chart

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

    Line Chart Data Structure:

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

    Blazor Line Chart with Single Series

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

    다음에서 이러한 유형의 차트를 만들 수 있습니다. IgbCategoryChart 데이터를 바인딩하고 설정하여 제어 ChartType 재산 Line, 아래 예와 같이:

    Blazor Line Chart with Multiple Series

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

    다음에서 이러한 유형의 차트를 만들 수 있습니다. IgbCategoryChart 데이터를 바인딩하고 설정하여 제어 ChartType 재산 Line, 아래 예와 같이:

    Blazor Line Chart with Live Data

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

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

    다음에서 이러한 유형의 차트를 만들 수 있습니다. IgbCategoryChart 데이터를 바인딩하고 설정하여 제어 ChartType 재산 Line, 아래 예와 같이:

    Blazor Styling Line Chart

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

    다음에서 이러한 유형의 차트를 만들 수 있습니다. IgbCategoryChart 데이터를 바인딩하고 설정하여 제어 ChartType 재산 Line, 아래 예와 같이:

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

    다음 예에서는 IgbDataChart의 IgbLineSeries에서 DashArray 사용하는 방법을 보여줍니다.

    Advanced Types of Line Charts

    다음 섹션에서는 단순화된 API를 사용하여 IgbDataChart 컨트롤 대신 IgbCategoryChart 컨트롤을 사용하여 생성할 수 있는 고급 유형의 Blazor 꺾은선형 차트에 대해 설명합니다.

    Blazor Stacked Line Chart

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

    Blazor Stacked 100% Line Chart

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

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

    Blazor Radial Line Chart

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

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

    Blazor Polar Line Chart

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

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

    Additional Resources

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

    API References

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

    차트 종류 컨트롤 이름 API 회원
    선 IgbCategoryChart ChartType = Line
    극선 IgbDataChart IgbPolarLineSeries
    방사형 라인 IgbDataChart IgbRadialLineSeries
    누적선 IgbDataChart IgbStackedLineSeries
    누적 100% 라인 IgbDataChart IgbStacked100LineSeries