Angular Data Pie Chart

    Ignite UI for Angular 데이터 파이 차트는 데이터 집합의 범주(부분)가 총(전체) 값에 어떻게 합산되는지 보여주는 부분 대 전체 차트입니다. 카테고리는 원형 또는 파이 모양의 그래프에서 섹션으로 렌더링됩니다. 각 섹션 또는 파이 슬라이스는 기본 데이터 값에 비례하는 호 길이를 갖습니다. 카테고리는 분석 중인 총 값에 대한 값 비율에 따라 다른 카테고리에 비례하여 100 또는 100%의 일부로 표시됩니다.

    Angular Data Pie Chart Example

    You can create the Angular Pie Chart in the IgxDataPieChartComponent by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization.

    Angular Data Pie Chart Recommendations

    파이 차트는 작은 데이터 세트에 적합하며 한 눈에 쉽게 읽을 수 있습니다. 파이 차트는 도넛(링) 차트, 깔때기형 차트, 누적 영역 차트, 누적 바 차트 및 트리맵과 같은 전체 대비 부분 시각화의 한 가지 유형일 뿐입니다.

    Angular Data 파이 차트 에는 뷰어가 데이터를 분석할 수 있는 도구를 제공하는 대화형 기능이 포함되어 있습니다.

    • 전설
    • 슬라이스 선택
    • Slice Highlighting
    • 차트 애니메이션

    파이 차트 모범 사례:

    • 슬라이스 또는 세그먼트를 전체 값 또는 전체에 비례하는 백분율 값으로 비교합니다.
    • 카테고리 그룹이 더 작은 세그먼트로 분할되는 방식을 보여줍니다.
    • 소규모의 비계층적 데이터 세트(6~8개 미만의 데이터 세그먼트)를 표시합니다.
    • 데이터 세그먼트의 합이 100%가 되도록 보장합니다.
    • 데이터의 순서를 가장 큰 것(가장 높은 것)에서 가장 작은 것(가장 작은 것)으로 정렬합니다.
    • 12시 위치에서 시작하여 시계 방향으로 계속되는 것과 같은 표준 프레젠테이션 기술을 사용합니다.
    • 부품의 세그먼트/슬라이스에 대해 색상 팔레트를 구별할 수 있는지 확인합니다.
    • 쉽게 읽을 수 있도록 세그먼트와 범례의 데이터 레이블을 고려합니다.
    • 이해의 용이성을 기준으로 Bar 또는 Ring과 같은 Pie 차트를 대체할 차트를 선택합니다.
    • 비교 분석을 위해 여러 원형 차트를 나란히 배치하는 것을 피하세요.

    다음과 같은 경우 파이 차트 사용하지 마십시오.

    • 시간에 따른 변화 비교 - 막대, 선 또는 영역 차트를 사용합니다.
    • 정확한 데이터 비교가 필요한 경우 막대, 선 또는 영역 차트를 사용하세요.
    • 6개 또는 8개 이상의 세그먼트(높은 데이터 볼륨)가 있습니다. 데이터 스토리에 적합한 경우 막대, 선 또는 영역 차트를 고려하십시오.
    • 막대 차트에서 값 차이를 보는 사람이 더 쉽게 인식할 수 있습니다.

    Angular Data Pie Chart Legend

    범례는 각 포인트에 대한 정보를 표시하고 총 합계에 대한 기여도를 아는 데 사용됩니다.

    In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the IgxLegendComponent property. The ItemLegend will display its items in vertical orientation as a default, but this can be changed by setting its orientation property.

    범례에 표시된 라벨은 기본적으로 각 슬라이스IgxDataPieChartComponent에 표시되는 라벨과 동일한 내용을 표시하지만, 차트의 속성을 활용legendSliceLabelContentMode 해 이를 수정할 수 있습니다. 이 기능은 차트의 각 슬라이스에 대해 라벨, 값, 백분율 또는 이들의 조합을 전례의 내용으로 표시할 수 있는 열거 기능을 제공합니다.

    ItemLegend 배지도 수정할 수 있습니다. 기본적으로 해당 차트 슬라이스의 색상에 해당하는 채워진 원으로 나타납니다. 차트의 속성을 사용legendItemBadgeShape 해 원, 선, 막대, 열로 설정할 수 있습니다.

    아래는 ItemLegend를 사용해IgxDataPieChartComponent 사용하는 예시입니다.

    Angular Pie Chart Others Category

    경우에 따라 원형 차트의 기본 데이터에는 값이 작은 많은 항목이 포함됩니다. 이 경우 Others 범주를 사용하면 여러 데이터 값을 단일 조각으로 자동 집계할 수 있습니다.

    OthersIgxDataPieChartComponent 카테고리에는 세 가지 주요 설정 가능한 속성 -othersCategoryType,,othersCategoryThreshold가othersCategoryText 있어서 차트에서 Others 슬라이스가 어떻게 표시될지 설정할 수 있습니다. 이들은 아래에 설명되어 있습니다:

    이 부동산은othersCategoryType 부동산과othersCategoryThreshold 연계되어 작동합니다.IgxDataPieChartComponent이 값othersCategoryType으로 평가할지 백분율로 평가할지 정의othersCategoryThreshold 할 수 있습니다. 예를 들어, 숫자를 결정하고 5othersCategoryThreshold로 설정하면, 값이 5보다 작은 슬라이스는 Others 범주에 포함됩니다. 동일한 값인 5에 퍼센트 유형을 사용하면, 전체IgxDataPieChartComponent 값의 5% 미만인 값은 타인(Others) 범주에 포함됩니다.

    차트의 Others 슬라이스 내에 포함된 기본 데이터 항목을 얻으려면, 차트 내 메서드를getOthersContext 활용할 수 있습니다. 이 메서드의 반환 타입은 속성을 노출시키는IgxOthersCategoryContextComponent 값items 입니다. 이 속성은items Others 슬라이스에 포함된 항목을 포함하는 배열을 반환합니다. 또한, Others 슬라이스Item를 클릭하면 해당 이벤트의SeriesClick 이벤트 인수 속성도 반환IgxOthersCategoryContextComponent 됩니다.

    기본적으로 Others 슬라이스는 "Others"라는 라벨로 표시됩니다. 차트의 속성을 수정othersCategoryText 하여 변경할 수 있습니다.

    Others(기타 카테고리)가 나타나IgxDataPieChartComponent 지 않도록 하려면 0othersCategoryThreshold으로 설정할 수 있습니다.

    다음 예제는 Others(타인) 슬라이스IgxDataPieChartComponent의 사용법을 보여줍니다:

    Angular Data Pie Chart Selection

    ​IgxDataPieChartComponent차트에 표시된 슬라이스를 마우스 클릭으로 선택할 수 있는 기능을 지원합니다. 이는 아래에 설명된 차트의 및selectionBehavior 속성을 활용하여selectionMode 구성할 수 있습니다:

    The main two options of the selectionBehavior are PerDataItemSingleSelect and PerDataItemMultiSelect, which will enable single and multiple selection, respectively.

    이 속성은selectionMode 파이 차트 슬라이스가 선택되었을 때 어떻게 반응하는지를 결정하는 열거를 제공합니다. 다음은 그 열거 목록의 선택지와 그 기능들입니다:

    • Brighten: The selected slices will be highlighted.
    • FadeOthers: The selected slices will remain their same color and others will fade.
    • FocusColorFill: The selected slices will change their background to the FocusBrush of the chart.
    • FocusColorOutline: The selected slices will have an outline with the color defined by the FocusBrush of the chart.
    • FocusColorThickOutline: The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well.
    • GrayscaleOthers: The unselected slices will have a gray color filter applied to them.
    • None: There is no effect on the selected slices.
    • SelectionColorFill: The selected slices will change their background to the SelectionBrush of the chart.
    • SelectionColorOutline: The selected slices will have an outline with the color defined by the SelectionBrush of the chart.
    • SelectionColorThickOutline: The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well.
    • ThickOutline: The selected slices will apply an outline with the thickness dependent on the Thickness property of the chart.

    조각을 선택하면 해당 기본 데이터 항목이 차트의 SelectedSeriesItems 컬렉션에 추가됩니다. 따라서 XamDataPieChart는 SelectedSeriesItemsChanged 이벤트를 노출하여 조각이 선택되고 이 컬렉션이 변경된 경우를 감지합니다.

    다음 샘플은 대조군IgxDataPieChartComponent의 선택 특성을 보여줍니다:

    Angular Data Pie Chart Highlighting

    ​IgxDataPieChartComponent마우스 오버 하이라이트와 별도의 데이터 소스를 제공하여 구성할 수 있는 하이라이트 오버레이를 지원합니다.

    첫째, 열거된 속성이highlightingBehavior 슬라이스가 어떻게 강조될지 결정합니다. 다음은 해당 부동산의 옵션과 그들이 하는 일입니다:

    • DirectlyOver: The slices are only highlighted when the mouse is directly over them.
    • NearestItems: The nearest slice to the mouse position will be highlighted.
    • NearestItemsAndSeries: The nearest slice and series to the mouse position will be highlighted.
    • NearestItemsRetainMainShapes: The nearest items to the mouse position will be highlighted and the main shapes of the series will not be de-emphasized.

    열거된 속성은highlightingMode 데이터 파이 차트 슬라이스가 강조 표시될 때 어떻게 반응하는지를 결정합니다. 다음은 해당 부동산의 옵션과 그들이 하는 일입니다:

    • Brighten: The series will have its color brightened when the mouse position is over or near it.
    • BrightenSpecific: 마우스 위치가 해당 슬라이스 위에 있거나 가까이 있을 때 해당 슬라이스의 색상이 밝아집니다.
    • FadeOthers: The series will retain its color when the mouse position is over or near it, while the others will appear faded.
    • FadeOthersSpecific: 마우스 위치가 해당 슬라이스에 닿거나 가까이 있을 때는 색상을 유지하지만, 나머지 슬라이스는 희미하게 보입니다.
    • None: The series and slices will not be highlighted.

    다음 예시는 컴포넌트의IgxDataPieChartComponent 마우스 하이라이트 동작을 보여줍니다:

    마우스 강조 외에도,IgxDataPieChartComponent 데이터의 일부를 표시할 수 있는 하이라이트 필터 기능을 노출합니다. 이는 다음을 지정하여 적용합니다HighlightedDataSource 제어에 대해 그리고 다음을 설정함으로써highlightedValuesDisplayMode property를Overlay. 그HighlightedDataSource 할당된 데이터의 일부를 기대한다.DataSource​IgxDataPieChartComponent.

    이러한 조건이 충족되면 하위 집합의 값이 강조 표시되고 전체 데이터 집합의 나머지 부분은 흐리게 표시되어 하위 집합에 대한 강조 표시가 효과적으로 만들어지고 동일한 컨트롤 내에서 데이터의 하위 집합을 더 쉽게 시각화할 수 있습니다.

    다음 예제에서는 강조 표시 필터링을 보여 줍니다.

    Angular Data Pie Chart Animation

    서포트는IgxDataPieChartComponent 슬라이스를 시각화하거나 값이 바뀔 때 애니메이션을 만듭니다.

    다음 설정을 할 수 있습니다.isTransitionInEnabled property를 참 원형 차트가 보이도록 애니메이션을 넣는 것. 수행되는 애니메이션 유형은 다음 설정을 통해 구성할 수 있습니다.transitionInMode 원하는 애니메이션 유형에 열거된 속성. 또한, 다음 조건을 설정할 수도 있습니다transitionInSpeedType 인덱스, 가치, 정규, 무작위화 등으로 스케일링하는 속성입니다. 이 애니메이션의 지속 시간은 다음으로 제어할 수 있습니다.transitionInDuration 속성은 다음을 취한다TimeSpan.

    데이터 변경을 애니메이션화하고 싶다면, 속성을animateSeriesWhenAxisRangeChanges​ ​true로 설정하는 것도 가능합니다. 이 변경 기간은 속성을 설정transitionDuration 하여 설정할 수도 있습니다.

    다음 샘플은 애니메이션IgxDataPieChartComponent의 활용을 보여줍니다:

    Additional Resources

    API References

    다음 표에는 위 섹션에서 언급된 API 멤버가 나열되어 있습니다.

    차트 종류 컨트롤 이름 API 회원
    데이터 파이 차트 IgxDataPieChartComponent IgxDataPieChartComponent
    Item Legend IgxItemLegendComponent IgxItemLegendComponent