PowerApps의 원형 차트Pie chart control in PowerApps

서로 비교하는 상대 값을 보여주는 컨트롤입니다.A control that shows relative values in comparison to each other.

설명Description

맨 왼쪽 열의 레이블과 왼쪽에서 두 번째 열에 값을 포함한 표에서 상대적 데이터를 표시하려는 경우 원형 차트 컨트롤을 추가합니다.Add a Pie chart control if you want to show relative data from a table that contains labels in the leftmost column and values in the second column from the left.

이 컨트롤은 세 가지 컨트롤 레이블(제목), 차트 그래픽 및 범례를 포함하는 그룹화된 컨트롤입니다.This control is a grouped control containing three controls: a Label for the title, the chart graphic, and a Legend.

차트 키 속성Chart key properties

Items – 갤러리, 목록 또는 차트와 같은 컨트롤에 표시되는 데이터 원본입니다.Items – The source of data that appears in a control such as a gallery, a list, or a chart.

ShowLabels – 원형 차트에서 각 웨지가 연결되어 있는 값을 표시할지 여부를 선택합니다.ShowLabels – Whether a pie chart shows the value that's associated with each of its wedges.

추가 차트 속성Additional chart properties

BorderColor - 컨트롤의 테두리 색입니다.BorderColor – The color of a control's border.

BorderStyle - 컨트롤의 테두리는 Solid, Dashed, Dotted, None입니다.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness - 컨트롤의 테두리 굵기입니다.BorderThickness – The thickness of a control's border.

Color – 컨트롤의 텍스트 색입니다.Color – The color of text in a control.

DisplayMode – 컨트롤이 사용자 입력을 허용(편집)하거나, 데이터만 표시(보기)하거나 사용 안 하도록(사용 안 함) 설정할지 선택합니다.DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 테두리 색입니다.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

Explode – 원형 차트에서 웨지 사이의 거리입니다.Explode – The distance between wedges in a pie chart.

Font – 텍스트가 표시되는 글꼴의 제품군 이름입니다.Font – The name of the family of fonts in which text appears.

Height – 컨트롤의 위쪽 및 아래쪽 가장자리 사이의 간격입니다.Height – The distance between a control's top and bottom edges.

HoverBorderColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 테두리 색입니다.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

ItemBorderColor – 원형 차트에서 각 웨지 둘레의 테두리 색입니다.ItemBorderColor – The color of the border around each wedge in a pie chart.

ItemBorderThickness – 원형 차트에서 각 웨지 둘레의 테두리 두께입니다.ItemBorderThickness – The thickness of the border around each wedge in a pie chart.

ItemColorSet – 차트의 각 데이터 요소에 대한 색입니다.ItemColorSet – The color of each data point in a chart.

LabelPosition – 원형 차트에서 웨지와 상대적인 레이블의 위치입니다.LabelPosition – The location of labels in a pie chart relative to its wedges.

OnSelect – 사용자가 앱을 클릭하거나 탭할 때 앱이 응답하는 방법입니다.OnSelect – How the app responds when the user taps or clicks a control.

PressedBorderColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 테두리 색입니다.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

Size -컨트롤에 표시되는 텍스트의 글꼴 크기입니다.Size – The font size of the text that appears on a control.

TabIndex – 다른 컨트롤에 관련된 키보드 탐색 순서입니다.TabIndex – Keyboard navigation order in relation to other controls.

Visible – 컨트롤을 표시하거나 숨길지 여부를 선택합니다.Visible – Whether a control appears or is hidden.

Width – 컨트롤의 왼쪽 및 오른쪽 가장자리 사이의 간격입니다.Width – The distance between a control's left and right edges.

X – 컨트롤의 왼쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 왼쪽 가장자리 사이의 거리입니다.X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – 컨트롤의 위쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 위쪽 가장자리 사이의 거리입니다.Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Max( DataSource, ColumnName )Max( DataSource, ColumnName )

Example

  1. 단추 컨트롤을 추가하고 이 수식에 OnSelect 속성을 설정합니다.Add a Button control, and set its OnSelect property to this formula:
    Collect(Revenue2015, {Product:"Europa", Revenue:27000}, {Product:"Ganymede", Revenue:26300}, {Product:"Callisto", Revenue:29200})Collect(Revenue2015, {Product:"Europa", Revenue:27000}, {Product:"Ganymede", Revenue:26300}, {Product:"Callisto", Revenue:29200})

    컨트롤을 추가하고 구성하는 방법을 모르시나요?Don't know how to add and configure a control?

    Collect 함수 또는 다른 함수에 대해 더 알고 싶으신가요?Want more information about the Collect function or other functions?

  2. F5 키를 누르고, 단추 컨트롤을 클릭하거나 탭한 다음, 기본 작업 영역으로 돌아가려면 Esc 키를 누릅니다.Press F5, click or tap the Button control, and then press Esc to return to the default workspace.

  3. 원형 차트 컨트롤을 추가하고 항목 속성을 Revenue2015로 설정합니다.Add a Pie chart control, and set its Items property to Revenue2015.

    원형 차트 컨트롤은 다른 제품과 관련하여 각 제품에 대한 수입 데이터를 보여줍니다.The Pie chart control shows revenue data for each product in relation to the other products.

접근성 지침Accessibility guidelines

색 대비Color contrast

다음 사이에 적절한 색 대비가 있어야 합니다.There must be adequate color contrast between:

  • ItemColorSet의 각 항목each item in ItemColorSet
  • ItemColorSet의 모든 항목 및 배경색every item in ItemColorSet and the background color
  • Color 및 배경색Color and the background color

화면 판독기 지원Screen reader support

  • 제목으로 사용할 차트 그래픽 바로 앞에 레이블 이 있어야 합니다.There must be a Label immediately before the chart graphic to serve as the title.

    참고

    차트 그래픽 및 범례는 화면 읽기 프로그램 사용자에게 숨겨집니다.Chart graphics and Legend are hidden from screen reader users. 대신 데이터의 테이블 형식으로 표시됩니다.As an alternative, a tabular form of the data is presented to them. 차트에서 데이터를 선택하는 단추를 순환할 수도 있습니다.They can also cycle through buttons that select data in the chart.

저시력 사용자 지원Low vision support

  • 범례가 있어야 합니다.There must be a Legend.
  • ShowLabelstrue로 설정하는 것이 좋습니다.Consider setting ShowLabels to true. 이렇게 하면 저시력 사용자가 각 원형 조각이 나타내는 부분을 빠르게 확인할 수 있습니다.This helps low-vision users quickly determine what each pie slice represents.
  • LabelPositionLabelPosition.Outside로 설정하는 것이 좋습니다.Consider setting LabelPosition to LabelPosition.Outside. 이렇게 하면 더 일관된 색 대비로 인해 레이블의 가독성이 향상됩니다.This increases legibility of labels because of a more consistent color contrast.

키보드 지원Keyboard support

  • 키보드 사용자가 탐색할 수 있도록 TabIndex 가 0 이상이어야 합니다.TabIndex must be zero or greater so that keyboard users can navigate to it.

    참고

    키보드 사용자가 차트로 이동하면 차트에서 데이터를 선택하는 단추를 순환할 수 있습니다.When keyboard users navigate to the chart, they can cycle through buttons that select data in the chart.