React Chart Data Tooltip

    In Ignite UI for React, the DataToolTip displays values and titles of series as well as legend badges of series in a tooltip. In addition, it provides many configuration properties of the IgrDataLegend for filtering series rows and values columns, styling, and formatting values. This tooltip type updates while moving the mouse inside of the plot area of the IgrCategoryChart, IgrFinancialChart, and IgrDataChart components.

    React Data Tooltip Properties

    의IgrDataToolTipLayer 모든 속성은 DataToolTip로 접두를 받으며 APIIgrCategoryChart와IgrFinancialChart 컴포넌츠에 노출됩니다. 하지만 방사형 차트, 극지방 차트, 산점지도와 함께 사용하려면 구성 요소의 시리즈IgrDataToolTipLayer 컬렉션IgrDataChart에 인스턴스를 만들어 추가해야 합니다.

    React Data Tooltip Elements

    ​DataToolTip은 세 가지 유형의 행과 네 가지 유형의 열 집합을 사용하여 콘텐츠를 표시합니다.

    React Data Tooltip Rows

    ​DataToolTip의 행에는 머리글 행, 계열 행 및 요약 행이 포함됩니다.

    헤더 행은 마우스를 올리는 점의 축 라벨을 표시하며, 속성dataToolTipHeaderText 변경이 가능합니다.

    계열 행은 실제로 차트에 표시된 각 계열에 해당하는 행 집합일 수 있습니다. 이 행에는 범례 배지, 시리즈 제목, 시리즈의 실제/약식 값, 약어 기호 및 단위(지정된 경우)가 표시됩니다.

    마지막으로, 모든 시리즈 값의 합계를 보여주는 요약 행이 있습니다. 기본 요약 제목은 전설의 속성을 사용해dataToolTipSummaryTitleText 변경할 수 있습니다. 또한, 이 속성을 사용dataToolTipSummaryType 해 요약 행에 시리즈 값의 총, 최소, 최대, 평균 중 어떤 항목을 표시할지 맞춤 설정할 수 있습니다.

    다음 예에서는 요약이 적용된 데이터 도구 설명을 보여줍니다.

    React Data Tooltip Columns

    열IgrDataToolTipLayer 에는 제목, 라벨, 가치, 단위 열이 포함됩니다. 차트의 각 시리즈는 차트의 컬렉션dataToolTipIncludedColumns에 따라dataToolTipExcludedColumns 라벨, 가치, 단위를 위한 여러 열을 가질 수 있습니다.

    타이틀 칼럼에는 차트에 표시된 다른chartTitle 이들의 속성에서IgrSeries 유래한 전설 배지와 시리즈 타이틀이 표시됩니다.

    라벨 열은 툴팁의 또는dataToolTipIncludedColumns 컬렉션 내dataToolTipExcludedColumns 다양한 속성 경로의 이름이나 약어를 표시합니다.

    값 열은 시리즈 값을 축약된 텍스트로 표시하며, 이 속성을 사용해 모든 숫자에 동일한 약어를 적용할 수 있도록 이 속성을 ordataToolTipValueFormatAbbreviation로Auto​Shared 설정하여 서식화할 수 있습니다. 또는 사용자는 다른 약어(예:Independent​Kilo,,)Million를 선택할 수도 있습니다. 축약값의 정밀도는 각각 최소와 최대 숫자에 대해 와 를 사용하여dataToolTipValueFormatMinFractions​dataToolTipValueFormatMaxFractions 제어됩니다.

    단위 열은 약어 기호 및/또는 단위 텍스트를 표시하며, DataToolTip에서 'for all columns'를 설정dataToolTipUnitsText 하거나 차트 내 각 시리즈의 다음 속성을 사용하여 설정할 수 있습니다:

    • 카테고리 계열(예: ColumnSeries)
      • ValueMemberAsLegendUnit="K"
    • 금융 가격 시리즈:
      • OpenMemberAsLegendUnit="K"
      • LowMemberAsLegendUnit="K"
      • HighMemberAsLegendUnit="K"
      • CloseMemberAsLegendUnit="K"
    • Range Series:
      • LowMemberAsLegendUnit="K"
      • HighMemberAsLegendUnit="K"
    • Radial Series:
      • ValueMemberAsLegendUnit="km"
    • Polar Series:
      • RadiusMemberAsLegendUnit="km"
      • AngleMemberAsLegendUnit="degrees"

    위에 나열된 속성의 경우 이전에 언급한 레이블 열의 텍스트를 결정하기 위해 MemberAsLegendLabel로 끝나는 해당 속성이 있습니다.

    포함된 기둥들은dataToolTipIncludedColumns 그리고dataToolTipExcludedColumns 컬렉션은 일반적으로 기본 데이터 항목의 가치 경로에 대응하지만, 금융 시리즈에는 다음과 같은 특별한 경로가 포함될 수 있는 옵션이 있습니다High,Low,Open 그리고Close이 경로들은 금융 시리즈가 올바르게 플롯을 그리기 위해 필요한 것입니다. 당신은 보여줄 능력이 있습니다TypicalPrice,Change 그리고Volume 툴팁 내 옵션들.

    다음 예에서는 시가, 고가, 저가, 종가 및 변경 열이 추가된 데이터 도구 설명을 보여줍니다.

    React Data Tooltip Grouping for Data Chart

    dataLegendGroup모든 종류의 시리즈 중에서 데이터 범례에서 시리즈 그룹을 분류하는 문자열로 설정할 수 있습니다. 각 그룹은 다른 시리즈 그룹이 표시되기 전에 자체 요약 행을 가집니다: 기본적으로 DataLegend는 그룹 이름을 숨기지만, 속성을 true로 설정groupRowVisible 하면 그룹 이름을 표시할 수 있습니다.groupingMode 데이터 툴팁 레이어에서 "그룹"labelDisplayMode으로 설정하고 "가시"로 설정해야 합니다.

    React Data Tooltip Grouping & Positioning for Category Chart & Financial Chart

    설정할 수 있습니다dataToolTipGroupingMode 속성은 다음 중 하나에 해당합니다.Grouped 또는Individual 여러 시리즈의 콘텐츠를 단일 툴팁으로 묶거나, 각 시리즈별로 별도의 콘텐츠를 여러 툴팁에 묶는 방법도 있습니다. 안에Grouped 모드에서는 툴팁이 표시되는 위치를 다음과 같이 설정하여 사용자 지정할 수 있습니다.dataToolTipGroupedPositionModeX 그리고dataToolTipGroupedPositionModeY 부동산. 이 기능은 툴팁의 수평 및 수직 정렬을 커스터마이즈할 수 있게 해주며, 마우스 위치에 가장 가까운 직렬 포인트를 추적할지, 아니면 플롯 영역 가장자리에 툴팁을 고정할지 결정할 수 있게 해줍니다.

    다음 예에서는 차트 오른쪽 상단에 위치한 데이터 도구 설명을 보여줍니다.

    React Data Tooltip Value Formatting

    ​DataToolTip은 그dataToolTipValueFormatAbbreviation 속성을 사용하여 큰 수의 자동 축약을 제공합니다. 이렇게 하면 킬로, 백만, 십억 등과 같은 배수가 단위 열에 추가됩니다. 그리고 설정을 통해dataToolTipValueFormatMinFractions​dataToolTipValueFormatMaxFractions 표시되는 소수 숫자 수를 맞춤 설정할 수 있습니다. 이렇게 하면 소수점 뒤에 나오는 최소 및 최대 숫자 수를 각각 결정할 수 있습니다.

    다음 예에서는 최소 및 최대 분수가 설정된 DataToolTip을 보여줍니다.

    React Data Tooltip Value Mode

    ​DataToolTip 내에서 기본값 소진수 값을 화폐로 변경할 수 있는데, 레이어의 속성을 변경dataToolTipValueFormatMode 하면 됩니다. DataToolTip은 또한 표시된 화폐 심볼의 문화를 해당 속성을 사용dataToolTipValueFormatCulture 해 해당 문화 태그로 설정하여 문화를 수정할 수 있는 기능을 제공합니다. 예를 들어, 다음 샘플은 "en-GB"로 설정된 차트dataToolTipValueFormatCulture를 보여줍니다:

    Layout Mode

    범례 항목은 속성을 통해layoutMode 수직 또는 테이블 구조에 배치할 수 있습니다. 기본 수치는 이전Table 버전에서 보여준 것과 같은 느낌과 비주얼을 유지합니다.

    예.

    Layout Mode

    React Data Tooltip Styling

    ​DataToolTip은 각 열의 스타일링을 위한 속성을 제공합니다. 이 속성들은 각각 제목, 라벨, 값, 단위로 시작하며, 텍스트의 색상, 글꼴, 여백을 스타일링할 수 있습니다. 예를 들어, 각 색상의 텍스트 색상을 설정하고 싶다면,dataToolTipTitleTextColor​dataToolTipLabelTextColor​dataToolTipValueTextColor,dataToolTipUnitsTextColor 그리고 속성을 설정해야 합니다.

    다음 예에서는 위에서 언급한 스타일 속성의 사용법을 보여줍니다.

    도구 설명의 그룹화 부분을 포함하여 여러 속성이 노출됩니다.

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

    API References