파이 차트 위젯(테마 적용 가능)
 |
파이 차트는 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. 저장을 클릭한 다음 매쉬업 보기를 클릭합니다.
추가 속성을 사용하여 위젯을 구성할 수도 있습니다. 예를 들면, 다음과 같습니다.
사용 가능한 구성 옵션에 대한 자세한 내용은 이 항목의 위젯 속성 단원을 참조하십시오.
 |
런타임에 자동으로 차트 데이터를 업데이트하려면 자동 새로 고침 기능을 만들고 차트 데이터 서비스에 바인딩합니다. 자세한 내용은 자동 새로 고침을 참조하십시오.
|
모범 사례
• 차트에 데이터 카테고리를 너무 많이 추가하지 않도록 합니다. 조각이 작으면 읽기 어렵습니다.
• 작은 영역 내에 차트가 맞도록 하려면 값 레이블을 숨깁니다.
• 조각 간의 차이를 더 쉽게 확인할 수 있도록 데이터를 내림차순으로 정렬합니다.
위젯을 도넛형 차트로 구성
차트 DonutHoleSize 속성 내에 값을 지정하여 위젯을 도넛형 차트로 구성할 수 있습니다. 도넛형 차트는 가운데 부분이 없는 파이 차트입니다. 필요에 따라 위젯 ShowDonutSliceLabel 속성을 활성화하여 도넛형 차트의 가운데 부분에 선택한 데이터에 대한 추가 정보를 표시할 수 있습니다. 선택한 조각의 값과 레이블 모두 도넛형 차트 가운데 있는 빈 영역에 표시되고 ValuesPosition 속성은 무시됩니다.
데이터 값을 백분율로 표시
PercentileValues 속성을 사용하여 선택한 조각의 값을 백분율로 표시할 수 있습니다. 다음 그림에서는 선택한 조각이 차트에 있는 총 데이터의 40%에 해당하는 도넛형 차트를 보여줍니다.
시작 및 끝 각도 구성
기본적으로 파이 차트 위젯은 데이터를 360도 원으로 표시합니다. 여기서 0은 12시 위치에 있습니다. 위젯 StartAngle 및 EndAngle 속성을 사용하여 파이 시각화에 대한 사용자 정의 시작 및 끝 각도를 설정할 수 있습니다.
폴라 보기 모드 활성화
폴라 보기 모드는 차트의 각 조각을 동일한 각도로 표시합니다. 각 조각의 반지름 길이는 차트 데이터의 차이를 강조 표시하는 데 사용됩니다. 이 모드를 활성화하려면 위젯 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
|