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 멤버 목록입니다.