React Data Legend

    Ignite UI for React IgrDataLegend에서 는 계열의 값을 표시하고 계열 행 및 값 열 필터링, 값 스타일 지정 및 서식 지정을 위한 다양한 구성 속성을 제공하는 고도로 사용자 지정 가능한 버전입니다 IgrLegend. 이 범례는 , IgrFinancialChart,의 플롯 영역 IgrCategoryChart 내부로 마우스를 이동할 때 업데이트됩니다 IgrDataChart. 또한 사용자의 마우스 포인터가 그림 영역을 벗어날 때 마지막으로 가리킨 지점을 기억하는 영구 상태가 있습니다. 세 가지 유형의 행(머리글, 계열, 요약)과 네 가지 유형의 열(제목, 레이블, 값, 단위)을 사용하여 이 콘텐츠를 표시합니다.

    React Data Legend Rows

    의 IgrDataLegend 행에는 머리글 행, 계열 행 및 요약 행이 포함됩니다. 머리글 행에는 마우스로 가리킨 점의 축 레이블이 headerText 표시되며 속성을 사용하여 변경할 수 있습니다.

    Header Row

    머리글 행은 범주 계열 및 재무 계열 위로 마우스를 가져갈 때 x축의 현재 레이블을 표시합니다. and headerFormatTime 속성을 사용하여 headerFormatDate x축에 날짜가 표시되는 경우 날짜 및 시간 IgrDataLegend 형식을 지정할 수 있습니다. 다른 유형의 계열의 경우 머리 IgrDataLegend 글 행을 렌더링하지 않습니다.

    Series Row

    계열 행은 차트에 표시된 각 계열을 나타냅니다. 이 행에는 범례 배지, 시리즈 제목, 시리즈의 실제/약식 값, 약어 기호 또는 측정 단위(지정된 경우)가 표시됩니다. includedSeries 또는 excludedSeries 시리즈 속성을 시리즈의 인덱스(1, 2, 3) 또는 시리즈 제목(Tesla, Microsoft) 컬렉션으로 설정하여 시리즈 행을 필터링할 수 있습니다.

    Summary Row

    마지막으로 모든 계열 값의 합계를 표시하는 요약 행이 있습니다. 기본 요약 제목은 범례의 summaryTitleText 속성을 사용하여 변경할 수 있습니다. 또한 summaryType 속성을 사용하여 요약 행에 Total, Min, Max 또는 Average of series 값을 표시할지 여부를 사용자 정의할 수 있습니다.

    React Data Legend Columns

    의 열 IgrDataLegend 계열 제목, 레이블, 데이터 열 값 및 값과 연결된 선택적 단위를 포함합니다. 차트의 일부 계열에는 레이블, 값 및 단위에 대한 여러 열이 있을 수 있습니다. 예를 들어, 금융 가격 계열에는 높다, 낮다, 열다 그리고 닫다에서 필터링할 수 있는 데이터 열 IgrDataLegend 사용 includedColumns 또는 excludedColumns 속성.

    ​includedColumns 및 excludedColumns 속성에 대한 값 설정은 계열 유형과 지원하는 데이터 열 수에 따라 달라집니다. 예를 들어, includedColumns 속성을 시가 및 종가 문자열 컬렉션으로 설정할 수 있으며 차트가 금융 시리즈를 구성할 때 범례에는 주가에 대한 시가 및 종가 값만 표시됩니다. 다음 표에는 데이터 범례의 열을 필터링하는 데 사용할 수 있는 모든 열 이름이 나열되어 있습니다.

    Type of Series Column Names
    카테고리 시리즈 값
    방사형 시리즈 값
    폴라 시리즈 Radius, Angle
    Bubble Series X, Y, Radius
    스캐터 시리즈 X, Y
    범위 시리즈 저 높은
    금융 시리즈 고가, 저가, 시가, 종가, 변동, 일반가격, 거래량

    OHLC 가격의 일반 가격 및 변동률은 금융 시리즈별로 자동으로 계산되므로 데이터 소스에 포함할 필요가 없습니다.

    Title Column

    제목 열에는 범례 배지와 계열 제목이 표시되며, 이는 차트에 그려진 다른 IgrSeries 배지의 속성에서 title 비롯됩니다.

    Label Column

    레이블 열은 값 열 왼쪽에 짧은 이름을 표시합니다(예: 공개 주가의 경우 "O"). labelDisplayMode 속성을 사용하여 이 열의 표시 여부를 전환할 수 있습니다.

    Value Column

    값 열에는 계열 값이 약식 텍스트로 표시됩니다. 이 속성을 Shared로 설정하면 valueFormatAbbreviation 속성을 사용하여 모든 숫자에 동일한 약어를 적용하도록 서식을 지정할 수 있습니다. 또는 사용자가 Independent, Kilo, Million 등과 같은 다른 약어를 선택할 수 있습니다. 약어 값의 정밀도는 각각 최소 및 최대 자릿수에 대해 valueFormatMinFractions 및 valueFormatMaxFractions 사용하여 제어됩니다.

    Unit Column

    단위 열은 값 열 오른쪽에 약어 기호를 표시합니다. 단위 기호는 valueFormatAbbreviation 속성에 따라 달라집니다. 예를 들어 Million 약어의 경우 "M"입니다.

    Customizing Columns

    각 계열에서 MemberAsLegendLabel 및 MemberAsLegendUnit로 끝나는 속성을 사용하여 레이블 및 단위 열에 표시되는 텍스트를 사용자 정의할 수 있습니다. 다음 표에서는 레이블 및 단위 열에 대한 몇 가지 가능한 사용자 정의를 보여줍니다.

    Type of Series 계열 속성
    카테고리 시리즈 ValueMemberAsLegendLabel="$"
    ValueMemberAsLegendUnit="M"
    방사형 시리즈 ValueMemberAsLegendLabel="Distance:"
    ValueMemberAsLegendUnit="KM"
    폴라 시리즈 RadiusMemberAsLegendLabel="Radius:"
    RadiusMemberAsLegendUnit="KM"
    AngleMemberAsLegendLabel="Angle:"
    AngleMemberAsLegendUnit="°"
    범위 시리즈 HighMemberAsLegendLabel="H:"
    HighMemberAsLegendUnit="K"
    LowMemberAsLegendLabel="L:"
    LowMemberAsLegendUnit="K"
    금융 시리즈 OpenMemberAsLegendLabel="O:"
    OpenMemberAsLegendUnit="K"
    HighMemberAsLegendLabel="H:"
    HighMemberAsLegendUnit="K"
    LowMemberAsLegendLabel="L:"
    LowMemberAsLegendUnit="K"
    CloseMemberAsLegendLabel="C:"
    CloseMemberAsLegendUnit="K"

    또한 다음을 사용할 수 있습니다. UnitText의 속성 IgrDataLegend을 클릭하여 모든 단위 열에 표시되는 텍스트를 변경합니다.

    React Data Legend Styling

    ​IgrDataLegend 각 열 유형의 스타일을 지정하기 위한 속성을 제공합니다. 이러한 각 속성은 Title, Label, Value 또는 Units로 시작합니다. 텍스트의 색상, 글꼴 및 여백에 스타일을 지정할 수 있습니다. 예를 들어, 모든 열의 텍스트 색을 설정하려면 ,, labelTextColor​ ​valueTextColor, 속성을 unitsTextColor 설정합니다 titleTextColor. 다음 예제에서는 위에서 언급한 스타일 지정 속성을 활용하는 방법을 보여 줍니다.

    React Data Legend Value Formatting

    속성을 IgrDataLegend 사용하여 valueFormatAbbreviation 큰 숫자의 자동 축약을 제공합니다. 이렇게 하면 단위 열에 kilo, million, billion 등과 같은 승수가 추가됩니다. and valueFormatMaxFractions를 설정하여 표시되는 소수 자릿수를 사용자 지정할 수 있습니다 valueFormatMinFractions. 이렇게 하면 소수점 뒤에 각각 표시되는 최소 및 최대 자릿수를 결정할 수 있습니다. 다음 예제에서는 이러한 속성을 사용하는 방법을 보여 줍니다.

    React Data Legend Value Mode

    속성을 변경하여 에 있는 IgrDataLegend 값의 기본 10진수 표시를 valueFormatMode 통화로 변경할 수 있습니다. 또한 속성을 culture 태그로 설정하여 valueFormatCulture 표시된 통화 기호의 문화권을 변경할 수 있습니다. 예를 들어 영국 파운드(£) 기호를 표시하기 위해 "en-GB"로 설정된 다음 예제 데이터 범례 valueFormatCulture는 다음과 같습니다.

    React Data Legend Grouping

    dataLegendGroup 모든 유형의 시리즈에서 Data Legend에서 계열 그룹을 분류하는 문자열로 설정할 수 있습니다. 각 그룹에는 다른 계열 그룹이 표시되기 전에 표시되는 고유한 요약 행이 있습니다. 기본적으로 DataLegend는 그룹 이름을 숨기지만 속성을 true로 설정하여 groupRowVisible 그룹 이름을 표시할 수 있습니다.

    React Data Legend Styling & Events

    범례의 그룹화 부분을 포함하여 여러 속성이 노출됩니다.

    • GroupRowMargin
    • GroupTextMargin
    • groupTextColor
    • GroupTextFontSize
    • GroupTextFontFamily
    • GroupTextFontStyle
    • GroupTextFontStretch
    • GroupTextFontWeight
    • HeaderTextMargin
    • headerTextColor
    • HeaderTextFontSize
    • HeaderTextFontFamily
    • HeaderTextFontStyle
    • HeaderTextFontStretch
    • HeaderTextFontWeight

    해당 IgrDataLegend 행을 렌더링할 때 발생하는 여러 이벤트가 있으며, 값이 업데이트되는 마우스 상호 작용 중에도 발생합니다. 이러한 이벤트는 사용하도록 설계된 용도에 대한 설명과 함께 아래에 나열되어 있습니다.

    • StyleGroupRow: 이 이벤트는 그룹 행에 표시되는 텍스트의 스타일을 지정하기 위해 각 그룹에 대해 발생합니다.
    • StyleHeaderRow: 이 이벤트는 머리글 행을 렌더링할 때 발생합니다.
    • StyleSeriesRow: 이 이벤트는 각 계열 행에 대해 한 번 발생하며 계열 값의 조건부 스타일 지정을 허용합니다.
    • StyleSeriesColumn: 이 이벤트는 각 시리즈 열에 대해 한 번 발생하며, 이를 통해 차트의 시리즈에 대한 다양한 열의 조건부 스타일 지정이 가능합니다.
    • StyleSummaryRow: 이 이벤트는 요약 행을 렌더링할 때 한 번 발생합니다.
    • StyleSummaryColumn: 이 이벤트는 요약 열을 렌더링할 때 한 번 발생합니다.

    일부 이벤트는 매개 변수를 인수로 노출 IgrDataLegendStylingRowEventArgs 하여 각 항목의 텍스트, 텍스트 색 및 행의 전체 표시 유형을 사용자 지정할 수 있습니다. event 인수는 이벤트별 속성도 노출합니다. 예를 들어 각 계열에 StyleSeriesRow 대해 이벤트가 발생하므로 이벤트 인수는 계열을 나타내는 행의 계열 인덱스와 계열 제목을 반환합니다.

    StyleSummaryColumn 그리고 SeriesStyleColumn 이벤트는 매개 변수를 인수로 노출 IgrDataLegendStylingColumnEventArgs 하여 계열의 각 필드를 사용자 지정합니다. 또한 이벤트 인수는 열에 대한 열 인덱스 및 값 멤버 관련 속성과 같은 이벤트별 속성을 노출합니다.

    API References