React 스파크라인

    The Ignite UI for React Sparkline is a lightweight charting control. It is intended for rendering within a small-scale layout such as within a grid cell but can also be rendered alone. The Sparkline has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips.

    React Sparkline Example

    다음 예시는 다양한 유형의 사용 가능한 것Sparkline 들을 보여줍니다. 타입은 속성 설정으로 정의됩니다.displayType 속성이displayType 지정되어 있지 않으면 기본적으로 타입이Line 표시됩니다.

    이 샘플이 마음에 드시나요? 당사의 완전한 React 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    Sparkline Recommendations

    Is the Sparkline chart right for your project?

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

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

    Sparkline Use Cases

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

    Sparkline Best Practices

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

    When Not to Use Sparkline

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

    Sparkline Data Structure

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

    Sparkline Types

    The React Sparkline supports the following types of sparklines by setting the displayType property accordingly:

    • Line: 선도형 스파크라인을 수치 데이터로 표시하며, 데이터 포인트를 선 분별로 연결합니다. Sparkline에서 데이터를 시각화하려면 최소 두 개의 데이터 포인트가 제공되어야 합니다.
    • Area: 숫자 데이터와 함께 Sparkline의 영역 차트 유형을 표시합니다. 이것은 선형 유형과 비슷하며, 각 선을 그릴 때마다 영역을 닫는 추가 단계가 있습니다. Sparkline에서 데이터를 시각화하려면 최소 두 개의 데이터 포인트가 제공되어야 합니다.
    • Column: 숫자 데이터와 함께 Sparkline의 컬럼 차트 유형을 표시합니다. 어떤 사람들은 이를 수직 막대(vertical bars)라고 부를 수도 있습니다. 이 타입은 단일 데이터 포인트를 렌더링할 수 있지만, Sparkline에서 최소 값 범위 속성(최소값)을 지정해야 제공된 단일 데이터 포인트가 보이도록 해야 하며, 그렇지 않으면 해당 값이 최소 값으로 간주되어 보이지 않습니다.
    • WinLoss: This type is similar in its visual appearance to Column chart type, in which the value of each column is equal to either the positive maximum (for positive values) or the negative minimum (for negative value) of the data set. The idea is to indicate a win or loss scenario. For the Win/Loss chart to display properly, the data set must have both positive and negative values. If the WinLoss sparkline is bound to the same data as the other types such as the Line type, which can be bound to a collection of numeric values, then the React Sparkline will select two values from the collection - the highest and the lowest - and will render the sparkline based upon those values.

    Markers

    The React Sparkline allows you to show markers as circular-colored icons on your series to indicate the individual data points based on X/Y coordinates. Markers can be set on sparklines of display types of Line, Area, and Column. The WinLoss type of sparkline does not currently accept markers. By default, markers are not displayed, but they can be enabled by setting the corresponding marker visibility property.

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

    • All: 스파크라인 내 모든 데이터 포인트에 대한 표시 표시.
    • Low: 가장 낮은 값의 데이터 포인트에 마커를 표시합니다. 만약 가장 낮은 값에 여러 점이 있다면, 그 값이 있는 각 점마다 표시됩니다.
    • High: 가장 높은 값의 데이터 포인트에 마커를 표시하세요. 만약 가장 높은 숫자에 여러 점이 있다면, 그 값이 있는 각 점에 표시됩니다.
    • First: 스파크라인의 첫 번째 데이터 포인트에 마커를 표시하세요.
    • Last: 스파크라인의 마지막 데이터 포인트에 마커를 표시하세요.
    • Negative: 스파크라인에 표시된 음의 데이터 포인트에 표시 마커를 표시하세요.

    위에 언급된 모든 마커는 색상, 가시성, 크기 등 관련 마커 유형의 특성을 사용해 커스터마이즈할 수 있습니다. 예를 들어, 위의 마커들은Low 속성,lowMarkerBrush, 를lowMarkerVisibility 가집니다lowMarkerSize.

    Normal Range

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

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

    기본적으로 일반 범위는 표시되지 않습니다. 활성화되면 노멀 범위가 연한 회색 색상으로 나타나며, 이 설정도 이 속성을 통해normalRangeFill 설정할 수 있습니다.

    You can also configure whether to show the normal range in front of or behind the plotted series in your React Sparkline by setting the displayNormalRangeInFront property.

    Trendlines

    The React Sparkline has support for a range of trendlines that display as another layer on top of the actual sparkline layer. To display a sparkline, you can use the trendLineType property.

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

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

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

    Unknown Value Interpolation

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

    To plot the unknown values, you can set the unknownValuePlotting property of the React Sparkline. The sample below shows the differences between the values of the unknownValuePlotting property, allowing you to toggle it on or off using a checkbox:

    Sparkline in Data Grid

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

    Additional Resources

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

    API References

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