Angular 스파크라인

    Ignite UI for Angular 가벼운 차트 컨트롤입니다. 그리드 셀과 같은 소규모 레이아웃 내에서 렌더링하도록 설계되었지만 단독으로 렌더링할 수도 있습니다. Sparkline 에는 차트 유형, 마커, 범위, 추세선, 알 수 없는 값 플로팅 및 도구 설명과 같이 구성 및 사용자 정의할 수 있는 여러 가지 시각적 요소와 해당 기능이 있습니다.

    Angular Sparkline Example

    다음 예에서는 사용 가능한 다양한 유형의 Sparkline 모두 보여줍니다. 유형은 displayType 속성을 설정하여 정의됩니다. displayType 속성을 지정하지 않으면 기본적으로 Line 유형이 표시됩니다.

    이 샘플이 마음에 드시나요? 전체 Angular 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하세요. 무료로 다운로드하세요.

    Sparkline Recommendations

    Is the Sparkline chart right for your project?

    다른 차트 컨트롤과 비교하여 Sparkline 컨트롤의 주요 이점은 모든 시각적 요소가 표시된 그리드 셀과 같은 제한된 공간에서 렌더링할 수 있다는 것입니다.

    Angular Sparkline은 타원형 아이콘으로 데이터 포인트를 표시하여 가장 높은 값, 가장 낮은 값, 처음 값, 마지막 값, 음수 값을 나타낼 수 있습니다. 마커는 원하는 모양, 색상 또는 이미지로 사용자 정의할 수 있습니다.

    Sparkline Use Cases

    • 차트를 표시할 수 있는 작은 공간이 있습니다.
    • 주간 수익과 같은 일련의 값으로 추세를 표시하려고 합니다.

    Sparkline Best Practices

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

    When Not to Use Sparkline

    • 데이터를 자세히 분석해야 합니다.
    • 데이터 포인트의 모든 레이블을 표시해야 합니다. Y축에는 높은 값과 낮은 값만 표시하고 X축에는 첫 번째 값과 마지막 값만 표시할 수 있습니다.

    Sparkline Data Structure

    • 1차원 데이터가 필요합니다.
    • 데이터 세트에는 숫자 필드가 두 개 이상 포함되어야 합니다.
    • 데이터 소스 필드의 텍스트를 사용하여 X축의 첫 번째 레이블과 마지막 레이블을 표시할 수 있습니다.

    Sparkline Types

    Angular Sparkline은 displayType 속성을 적절히 설정하여 다음 유형의 스파크라인을 지원합니다.

    • Line: 데이터 포인트를 선분으로 연결하여 숫자 데이터를 포함하는 스파크라인(Sparkline) 형태의 라인 차트를 표시합니다. Sparkline에서 데이터를 시각화하려면 두 개 이상의 데이터 포인트를 제공해야 합니다.
    • Area: 숫자 데이터를 포함하는 Sparkline 형태의 Area형 차트를 표시합니다. 이는 각 선을 그린 후 영역을 닫는 추가 단계가 있는 선 유형과 같습니다. Sparkline에서 데이터를 시각화하려면 두 개 이상의 데이터 포인트를 제공해야 합니다.
    • Column: 숫자 데이터를 포함하는 스파크라인(Sparkline) 형태의 컬럼 차트를 표시합니다. 어떤 사람들은 이를 수직 막대라고 부를 수도 있습니다. 이 유형은 단일 데이터 포인트를 렌더링할 수 있지만 제공된 단일 데이터 포인트가 표시될 수 있도록 Sparkline에서 최소값 범위 속성(최소값)을 지정해야 합니다. 그렇지 않으면 값이 최소값으로 처리되어 표시되지 않습니다.
    • WinLoss: 이 유형은 막대형 차트 유형과 시각적 모양이 비슷한데, 각 막대의 값은 데이터 집합의 양수 최대값(양수 값의 경우) 또는 음수 최소값(음수 값의 경우)과 같습니다. 이 아이디어는 승패 시나리오를 나타내는 것입니다. 승패 차트가 제대로 표시되려면 데이터 집합에 양수 값과 음수 값이 모두 있어야 합니다. WinLoss 스파크라인이 숫자 값 컬렉션에 바인딩될 수 있는 Line 유형과 같이 다른 유형과 동일한 데이터에 바인딩된 경우 Angular 스파크라인은 컬렉션에서 가장 높은 값과 가장 낮은 값 두 개를 선택하고 해당 값에 따라 스파크라인을 렌더링합니다.

    Markers

    Angular Sparkline을 사용하면 시리즈에서 마커를 원형 색상 아이콘으로 표시하여 X/Y 좌표를 기준으로 개별 데이터 포인트를 나타낼 수 있습니다. 마커는 Line, Area, Column의 표시 유형의 스파크라인에 설정할 수 있습니다. WinLoss 유형의 스파크라인은 현재 마커를 허용하지 않습니다. 기본적으로 마커는 표시되지 않지만 해당 마커 가시성 속성을 설정하여 활성화할 수 있습니다.

    스파크라인의 마커는 다음 위치의 조합에 배치할 수 있습니다.

    • All: 스파크라인의 모든 데이터 포인트에 대한 마커를 표시합니다.
    • Low: 가장 낮은 값의 데이터 포인트에 마커를 표시합니다. 가장 낮은 값에 포인트가 여러 개 있는 경우 각 포인트에 해당 값이 표시됩니다.
    • High: 가장 높은 값의 데이터 포인트에 마커를 표시합니다. 가장 높은 값에 포인트가 여러 개 있는 경우 해당 값이 있는 각 포인트에 표시됩니다.
    • First: 스파크라인의 첫 번째 데이터 포인트에 마커를 표시합니다.
    • Last: 스파크라인의 마지막 데이터 포인트에 마커를 표시합니다.
    • Negative: 스파크라인에 표시된 음수 데이터 포인트에 마커를 표시합니다.

    위에서 언급한 모든 마커는 색상, 가시성, 크기 측면에서 관련 마커 유형의 속성을 사용하여 사용자 정의할 수 있습니다. 예를 들어 위의 Low 마커에는 lowMarkerBrush, lowMarkerVisibility 및 lowMarkerSize 속성이 있습니다.

    Normal Range

    Angular Sparkline의 정상 범위 기능은 데이터를 시각화할 때 미리 정의된 의미 있는 범위를 나타내는 수평 줄무늬입니다. 정상 범위는 원하는 색상으로 윤곽이 그려진 음영 처리된 영역으로 설정할 수 있습니다.

    정상 범위는 최대 데이터 포인트보다 넓거나 그 이상일 수 있으며, 예를 들어 임계값 표시기 역할을 하기 위해 스파크라인의 Line 표시 유형만큼 얇을 수도 있습니다. 정상 범위의 너비는 정상 범위를 표시하는 데 필요한 최소 설정 역할을 하는 다음 세 가지 속성에 의해 결정됩니다.

    기본적으로 정상 범위는 표시되지 않습니다. 활성화되면 정상 범위가 연한 회색으로 표시되며, 이는 normalRangeFill 속성을 사용하여 구성할 수도 있습니다.

    ​displayNormalRangeInFront 속성을 설정하여 Angular Sparkline에서 그려진 시리즈의 앞이나 뒤에 일반 범위를 표시할지 여부를 구성할 수도 있습니다.

    Trendlines

    Angular Sparkline은 실제 스파크라인 레이어 위에 다른 레이어로 표시되는 다양한 트렌드라인을 지원합니다. 스파크라인을 표시하려면 trendLineType 속성을 사용할 수 있습니다.

    추세선은 차트가 바인딩된 데이터 값을 사용하여 trendLineType 속성에 지정된 알고리즘에 따라 계산됩니다.

    추세선은 한 번에 하나씩만 표시할 수 있으며 기본적으로 추세선은 표시되지 않습니다.

    아래 샘플은 드롭다운을 통해 사용 가능한 모든 추세선을 보여줍니다.

    Unknown Value Interpolation

    Angular Sparkline은 알 수 없는 값을 감지하고 지정된 보간 알고리즘을 통해 알 수 없는 값의 공간을 렌더링할 수 있습니다. 데이터에 null 값이 포함되어 있고 이 기능을 사용하지 않으면 보간이 지정되지 않은 것으로, 알 수 없는 값은 플로팅되지 않습니다.

    알 수 없는 값을 플로팅하려면 Angular Sparkline의 unknownValuePlotting 속성을 설정할 수 있습니다. 아래 샘플은 unknownValuePlotting 속성 값 간의 차이를 보여주며, 체크박스를 사용하여 켜거나 끌 수 있습니다.

    Sparkline in Data Grid

    데이터 그리드의 템플릿 열이나 템플릿을 지원하는 다른 UI 컨트롤에 Angular Sparkline을 임베드할 수 있습니다. 다음 코드 예제는 이를 수행하는 방법을 보여줍니다.

    Additional Resources

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

    API References

    다음은 위 섹션에서 언급된 API 멤버 목록입니다.