매쉬업 작성기 > 위젯 > 표준 위젯 > 파이 차트 위젯(테마 적용 가능)
파이 차트 위젯(테마 적용 가능)
* 
파이 차트는 Mashup Builder의 위젯으로, SDK에서 가져올 수 있는 웹 구성 요소로 사용할 수 있습니다.
파이 차트 위젯은 인포테이블에 한 데이터 계열의 값을 표시합니다. 숫자, 날짜 또는 문자열과 같은 카테고리 유형에 대해 숫자 값을 표시할 수 있습니다. 각 값은 조각으로 시각화됩니다. 각 조각의 크기는 차트의 값 합계에 상대적인 값에 비례합니다. 다음과 같은 방법으로 파이 차트를 구성할 수 있습니다.
도넛형 차트를 표시할 반지름을 정의합니다.
숫자 데이터를 백분율 값으로 표시합니다.
차트의 시작 및 끝 각도를 설정합니다.
코너를 둥글게 만들어 차트 조각 사이에 안쪽 여백을 추가합니다.
데이터 형식
차트에 데이터를 표시하려면 차트 데이터 구조를 나타내는 필드 정의가 있는 인포테이블을 만들어야 합니다. 인포테이블에는 차트에 있는 각 조각의 레이블 및 값에 대한 필드 정의가 포함되어야 합니다. 각 인포테이블 행은 차트의 조각과 여기에 해당하는 값을 나타냅니다. 다음 표에는 인포테이블의 데이터 형식이 나와 있습니다.
조각 레이블
조각 값
필드 정의
x: { name: 'x', baseType: 'STRING' }
value: { name: 'value', baseType: 'NUMBER' }
사용
조각 레이블을 정의합니다. 데이터에는 STRING, NUMBER 또는 DATETIME 기본 유형이 있어야 합니다. 각 행은 차트에 조각으로 표시됩니다. 이 열에 대해 정의된 이름은 위젯 DataField 속성에서 선택해야 하는 옵션입니다.
카테고리의 값과 범례 레이블을 정의합니다.
기본 유형
STRING, NUMBER 또는 DATETIME
NUMBER
행 예
x: 'Apple' - 여기서 Apple은 조각에 표시할 데이터 레이블입니다.
value: 10 - 조각의 값입니다.
데이터 소스 바인딩
차트를 데이터 소스에 바인딩하려면 다음 단계를 수행합니다.
1. 데이터 패널에서 위젯에 대한 올바른 데이터 형식의 인포테이블을 반환하는 데이터 서비스를 추가합니다.
* 
런타임에 서비스가 이벤트에 의해 트리거되는지 확인합니다.
2. 데이터 서비스의 All Data 속성을 차트의 Data 속성에 바인딩합니다.
3. 차트를 선택한 다음 속성 패널에서 DataField 속성을 사용하여 조각 레이블에 사용할 인포테이블 열을 선택합니다.
4. 저장을 클릭한 다음 매쉬업 보기를 클릭합니다.
추가 속성을 사용하여 위젯을 구성할 수도 있습니다. 예를 들면, 다음과 같습니다.
차트에 상태 서식을 적용하려면 DataStyle 속성을 사용합니다. 자세한 내용은 예: 차트에 상태 서식 적용을 참조하십시오.
사용 가능한 구성 옵션에 대한 자세한 내용은 이 항목의 위젯 속성 단원을 참조하십시오.
* 
런타임에 자동으로 차트 데이터를 업데이트하려면 자동 새로 고침 기능을 만들고 차트 데이터 서비스에 바인딩합니다. 자세한 내용은 자동 새로 고침을 참조하십시오.
모범 사례
차트에 데이터 카테고리를 너무 많이 추가하지 않도록 합니다. 조각이 작으면 읽기 어렵습니다.
작은 영역 내에 차트가 맞도록 하려면 값 레이블을 숨깁니다.
조각 간의 차이를 더 쉽게 확인할 수 있도록 데이터를 내림차순으로 정렬합니다.
위젯을 도넛형 차트로 구성
차트 DonutHoleSize 속성 내에 값을 지정하여 위젯을 도넛형 차트로 구성할 수 있습니다. 도넛형 차트는 가운데 부분이 없는 파이 차트입니다. 필요에 따라 위젯 ShowDonutSliceLabel 속성을 활성화하여 도넛형 차트의 가운데 부분에 선택한 데이터에 대한 추가 정보를 표시할 수 있습니다. 선택한 조각의 값과 레이블 모두 도넛형 차트 가운데 있는 빈 영역에 표시되고 ValuesPosition 속성은 무시됩니다.
데이터 값을 백분율로 표시
PercentileValues 속성을 사용하여 선택한 조각의 값을 백분율로 표시할 수 있습니다. 다음 그림에서는 선택한 조각이 차트에 있는 총 데이터의 40%에 해당하는 도넛형 차트를 보여줍니다.
시작 및 끝 각도 구성
기본적으로 파이 차트 위젯은 데이터를 360도 원으로 표시합니다. 여기서 0은 12시 위치에 있습니다. 위젯 StartAngleEndAngle 속성을 사용하여 파이 시각화에 대한 사용자 정의 시작 및 끝 각도를 설정할 수 있습니다.
폴라 보기 모드 활성화
폴라 보기 모드는 차트의 각 조각을 동일한 각도로 표시합니다. 각 조각의 반지름 길이는 차트 데이터의 차이를 강조 표시하는 데 사용됩니다. 이 모드를 활성화하려면 위젯 PolarView 속성을 true로 설정합니다.
* 
위젯이 도넛형 차트로 구성되면 폴라 보기 모드가 지원되지 않습니다.
차트 조각의 코너를 둥글게 만들기
파이 조각 코너를 둥글게 만들려면 위젯 PieSliceRadius 속성 내에 값을 입력합니다. 기본적으로 반지름 값은 파이 차트의 외부 코너에 영향을 줍니다. 그러나 위젯이 도넛형 차트로 구성되면 내부 및 외부 코너에도 반지름 값이 적용됩니다.
차트 조각 사이에 안쪽 여백 추가
SlicePadding 속성을 사용하여 차트 조각 사이에 공백을 지정합니다.
데이터 선택 구성
파이 차트 위젯은 SelectionMode 속성을 사용하여 단일 및 여러 선택을 지원합니다. 위젯 SelectedData 인포테이블 속성을 사용하여 선택한 데이터를 다른 위젯 또는 데이터 서비스에 바인딩할 수 있습니다.
위젯 속성
이름
설명
기본 유형
기본값
바인딩 가능 여부
CustomClass
위젯의 최상위 div에 적용할 사용자 정의 CSS 클래스입니다.
여러 개의 클래스를 공백으로 구분하여 입력할 수 있습니다.
STRING
해당 없음
Y
Data
차트에 대한 데이터가 포함된 인포테이블입니다.
INFOTABLE
해당 없음
Y
DataField
차트에 표시할 데이터 레이블이 포함된 인포테이블 열을 지정합니다.
필드 이름
해당 없음
N
DataFieldType
데이터 레이블의 서식을 제어합니다.
STRING
문자열
N
DataStyle
차트에 상태 서식을 적용합니다.
상태 정의
해당 없음
N
Disabled
매쉬업에서 위젯을 비활성화합니다.
위젯이 매쉬업에 표시되지만 클릭하거나 선택할 수는 없습니다.
BOOLEAN
False
Y
DonutHoleSize
파이 차트 가운데의 구멍 크기를 설정합니다. 이 속성을 사용하여 도넛형 차트를 표시합니다. 지원되는 값은 40~99입니다.
NUMBER
0
Y
DonutSelectionlabelType
도넛형 차트에서 선택한 조각의 값을 표시하는 데 사용되는 레이블의 유형입니다.
STRING
큰 제목
N
EndAngle
파이 차트의 끝 각도를 설정합니다.
NUMBER
360
Y
StartAngle
차트의 시작 각도를 설정합니다.
NUMBER
0
Y
HideDataTooltips
차트의 데이터 요소를 마우스로 가리키거나 선택할 때 표시되는 도구 설명을 숨깁니다.
BOOLEAN
False
N
HideLegend
차트에서 범례 영역을 숨깁니다.
BOOLEAN
False
Y
HideNotes
차트에서 메모 영역을 숨깁니다.
BOOLEAN
False
Y
HighlightSelection
차트에서 선택한 조각을 강조 표시합니다.
BOOLEAN
False
N
Label
파이 차트에 표시할 텍스트 레이블을 지정합니다.
STRING
파이 차트
Y
LabelAlignment
파이 차트 위젯의 레이블을 왼쪽, 가운데 또는 오른쪽에 정렬합니다.
STRING
왼쪽
N
LabelPosition
맨 위 또는 맨 아래에 레이블 위치를 설정합니다.
STRING
맨 위
N
LabelType
파이 차트에 사용되는 레이블 유형을 제어합니다.
STRING
하위 머리글
Y
Margin
매쉬업 레이아웃에서 위젯 주위에 공간을 설정할 수 있습니다.
NUMBER
5
N
Notes
차트의 메모 영역 내에 표시할 텍스트를 지정합니다. 문자열을 입력하거나 로컬리제이션 토큰을 선택할 수 있습니다.
STRING
해당 없음
Y
NotesAlignment
메모 텍스트를 메모 영역 내의 왼쪽, 오른쪽 또는 가운데로 정렬합니다.
STRING
왼쪽
N
NotesPosition
메모 영역의 위치를 맨 위 또는 맨 아래에서 설정합니다.
STRING
맨 아래
N
PercentileValues
데이터 값을 변환하고 백분율로 표시합니다.
BOOLEAN
False
N
PieSlicePadding
파이 차트 조각 사이의 안쪽 여백 크기를 설정합니다.
NUMBER
0
N
PieSliceRadius
차트 조각의 코너 반지름을 지정합니다.
NUMBER
0
N
PolarView
반지름을 사용하여 값 사이의 차이를 시각화합니다. 각 카테고리는 동일한 각도로 표시됩니다.
BOOLEAN
False
N
ResetToDefaultValue
런타임에 위젯을 기본값으로 재설정하는 바인딩 가능한 서비스입니다.
서비스
해당 없음
Y
SelectedData
차트에서 선택한 조각에 대한 데이터가 포함된 인포테이블입니다. 여러 선택이 활성화되면 여러 행을 포함합니다.
INFOTABLE
해당 없음
Y
SelectionMode
선택 모드를 "단일" 또는 "여러"로 설정할 수 있습니다.
STRING
단일
Y
SeriesClicked
위젯의 데이터를 클릭할 때 트리거되는 이벤트입니다.
이벤트
해당 없음
Y
ShowDataLoading
위젯의 데이터가 로드될 때 로딩 아이콘을 표시합니다.
BOOLEAN
True
N
ShowDonutSliceLabel
도넛형 차트 조각의 레이블을 표시합니다.
BOOLEAN
False
N
ShowHideLegend
런타임에 범례 영역을 표시하거나 숨기는 전환 버튼을 표시합니다.
BOOLEAN
False
N
ShowValues
차트에 조각 값을 표시합니다. 작은 보기 포트에서 위젯을 열 경우 표시되는 조각의 수를 제한해야 합니다.
BOOLEAN
False
Y
ValuesPosition
차트에서 차트 값 레이블의 위치를 제어합니다. 옵션:
조각 위
조각 외부
조각 외부(선 포함)
STRING
조각 위
N
SparkView
차트의 단순화된 시각화를 표시합니다.
BOOLEAN
False
Y
TabSequence
Tab 키를 누를 때 위젯의 시퀀스 번호입니다.
NUMBER
0
N
ValueField
차트의 각 레이블에 대한 데이터 값을 포함하는 인포테이블 열입니다.
필드 이름
해당 없음
N
ValueFormat
차트에 표시되는 데이터 값에 서식을 적용합니다. 차트가 작은 보기 포트의 레이블에 맞도록 서식을 사용자 정의할 수 있습니다.
STRING
0000.0
Y
ValuesTooltip
차트 도구 설명의 서식 및 콘텐츠를 구성할 수 있습니다. 자세한 내용은 사용자 정의 차트 도구 설명 생성을 참조하십시오.
STRING
PieChartDefaultTooltip
Y
Visible
런타임에 위젯의 표시 유형을 제어합니다.
BOOLEAN
True
Y
도움이 되셨나요?