매쉬업 작성기 > 위젯 > 표준 위젯 > 파레토 차트 위젯(테마 적용 가능)
파레토 차트 위젯(테마 적용 가능)
소개
파레토 차트는 막대 그래프와 선 그래프의 조합으로 이루어진 차트 유형입니다. 개별 값은 막대 그래프별로 내림차순으로 표시되고, 누적 값은 선 그래프별로 표시됩니다. 파레토 차트의 누적 선은 막대의 데이터를 기준으로 자동으로 계산됩니다.
Mashup Builder에서 파레토 차트를 생성하는 방법을 보여주는 다음 비디오를 시청하십시오. 더 큰 창에서 비디오를 보려면 비디오 제목을 클릭합니다.
* 
이 위젯은 플랫폼에서 표준 포함으로 사용할 수 있으며 SDK에서 가져오는 경우 웹 구성 요소로 사용할 수 있습니다.
데이터 형식
차트의 데이터 구조를 나타내는 필드 정의가 포함된 인포테이블을 생성해야 합니다. 인포테이블에 X축 값 및 Y축 값에 대한 필드 정의를 포함해야 합니다. 데이터 계열 값에 대한 필드 정의가 있는 추가 열을 추가하여 여러 데이터 계열을 추가할 수 있습니다. 각 인포테이블 행은 X축의 카테고리와 여기에 해당하는 Y축 값을 나타냅니다. 다음 표에는 인포테이블의 데이터 형식이 나와 있습니다.
X축
Y축 값
Y축 값 N
필드 정의
x:{name:'x',baseType:'STRING'}
value1:{name:'value1',baseType:'NUMBER'}
value2:{name:'value2',baseType:'NUMBER'}
사용
가로 막대형 차트 또는 세로 막대형 차트의 X축 값을 정의합니다. 데이터의 기본 유형은 STRING이어야 합니다. 각 행은 X축에 카테고리로 표시됩니다. 이 열에 대해 정의된 이름은 XAaxisField 위젯 속성에 대해 선택해야 하는 옵션입니다.
카테고리의 Y축 값과 범례 레이블을 정의합니다.
각 추가 데이터 계열의 Y축 값과 범례 레이블을 정의합니다.
기본 유형
STRING
NUMBER
NUMBER
행 예
x:'Apple' - 여기서 Apple은 X축에 표시할 카테고리 이름입니다.
value1:10 - 카테고리의 Y축 값
value2:30 - 두 번째 데이터 계열의 Y축 값
다음 이미지는 Y축에 대한 4개의 필드 정의가 있는 인포테이블에서 반환된 데이터의 예를 보여줍니다.
속성 테이블
파레토 차트 위젯의 속성은 다음과 같습니다.
속성 이름
설명
기본 유형
기본값
바인딩 가능 여부 (Y/N)
로컬리제이션 가능 여부 (Y/N)
SampleSize
차트에 표시할 데이터 요소 수를 지정합니다.
NUMBER
해당 없음
N
N
ShowZoomButtons
가로 또는 세로 확대/축소가 활성화된 경우 차트 도구 모음의 확대/축소 버튼을 표시합니다.
BOOLEAN
False
N
N
EmptyChartIcon
차트가 비어 있을 때 표시할 아이콘을 지정합니다.
미디어 엔티티
not visible
N
N
EmptyChartLabel
차트가 비어 있을 때 표시할 텍스트를 지정합니다.
STRING
[[ChartStateLabelEmpty]]
N
Y
ErrorStateIcon
차트가 비어 있을 때 표시할 아이콘을 지정합니다.
미디어 엔티티
error
N
N
ErrorStateLabel
차트가 비어 있을 때 표시할 텍스트를 지정합니다.
STRING
N
Y
LoadingIcon
차트 데이터를 로드할 때 표시할 아이콘을 지정합니다.
미디어 엔티티
chart loading icon
N
N
NoDataSourceIcon
차트가 데이터 소스에 바인딩되어 있지 않을 때 표시할 아이콘을 지정합니다.
미디어 엔티티
bind
N
N
NoDataSourceLabel
차트가 데이터 소스에 바인딩되어 있지 않을 때 표시할 텍스트를 지정합니다.
STRING
[[ChartStateLabelNoData]]
N
Y
CumulativeLineLabel
범례 영역의 누적 선 레이블에 대해 표시되는 텍스트를 지정합니다.
STRING
퍼센트
Y
Y
CumulativeLineMarkerShape
누적 선의 데이터 요소에 대한 마커 형태를 설정합니다.
사용할 수 있는 옵션은 원형, 사각형, 다이아몬드형 또는 없음입니다.
STRING
원형
Y
N
CumulativeLineMarkerSize
누적 선의 데이터 요소에 대한 마커 크기를 설정합니다.
NUMBER
8
Y
N
CustomClass
위젯의 최상위 div에 적용되는 사용자 정의 CSS 클래스입니다. 여러 클래스를 공백으로 구분하여 입력할 수 있습니다.
STRING
해당 없음
Y
N
Data
차트에 대한 인포테이블 데이터 소스입니다.
INFOTABLE
해당 없음
Y
N
DataLabel1 - DataLabel24
이러한 속성은 NumberOfSereis를 특정 수로 설정할 때 나열됩니다. 속성을 사용하여 범례의 각 데이터 계열에 대한 사용자 정의 레이블을 지정할 수 있습니다. 자세한 내용은 차트 범례 사용자 정의를 참조하십시오.
STRING
해당 없음
N
Y
DataSeriesStyle
차트의 모든 데이터 계열에 대한 상태 서식 적용을 구성합니다.
데이터 값을 기반으로 계열의 스타일을 설정하여 추세 및 패턴을 보다 쉽게 파악할 수 있습니다.
각 데이터 계열에 대한 서식 적용 규칙을 구성하려면 NumberOfSeries 속성에 대한 특정 값을 입력합니다.
STATEDEFINITION
해당 없음
N
N
EmphasizeThresholdFactors
지정된 임계값 미만의 데이터를 강조 표시할 수 있습니다.
BOOLEAN
False
Y
N
ExternalPadding
축의 안쪽 여백을 설정합니다. 안쪽 여백은 막대 너비의 백분율입니다.
NUMBER
25
Y
N
HideCumulativeLine
누적 백분율을 표시하는 선을 숨깁니다.
BOOLEAN
False
Y
N
HideDataTooltips
차트의 데이터 요소를 마우스로 가리키거나 선택할 때 표시되는 도구 설명을 숨깁니다.
BOOLEAN
False
N
N
HideLegend
범례 영역을 숨깁니다.
BOOLEAN
False
Y
N
HideNotes
메모 영역을 숨깁니다.
BOOLEAN
False
Y
N
HideSecondYAxis
두 번째 Y축을 숨깁니다.
BOOLEAN
False
Y
N
HideXAxis
X축을 숨깁니다.
BOOLEAN
False
Y
N
HideYAxis
Y축을 숨깁니다.
BOOLEAN
False
Y
N
HorizontalAxisMaxHeight
가로 축의 최대 높이를 설정합니다.
NUMBER
85
Y
N
HorizontalAxisLabelsRotation
가로 축의 레이블 회전 각도를 설정합니다. -180에서 180 사이의 값을 입력할 수 있습니다.
NUMBER
자동 크기 조정
N
N
HorizontalZoom
가로 축을 확대할 수 있습니다.
이 속성을 선택하면 추가 HorizontalRangeZoom, HorizontalSliderZoom, DirectSelectionZoom 및 DragSelectionZoom 속성이 속성 목록에 표시됩니다.
BOOLEAN
False
Y
N
DirectSelectionZoom
차트에서 두 개의 데이터 항목을 선택하여 직접 확대할 수 있습니다.
사용할 수 있는 옵션은 가로 축 및 없음입니다.
STRING
없음
Y
N
DragSelectionZoom
보려는 데이터 범위 주위에 선택 상자를 그려 차트의 특정 부분을 확대할 수 있습니다.
사용할 수 있는 옵션은 가로 축 및 없음입니다.
STRING
없음
Y
N
HorizontalRangeZoom
가로 축을 확대할 값 범위를 지정할 수 있는 컨트롤을 추가합니다.
이 속성을 선택하면 HorizontalStartZoomLabel 및 HorizontalEndZoomLabel 속성이 속성 목록에 표시됩니다.
BOOLEAN
False
Y
N
HorizontalStartZoomLabel
범위 선택 시작에 대한 텍스트 레이블을 지정합니다.
STRING
해당 없음
Y
Y
HorizontalRangeZoomDateFormat
범위 선택 확대/축소를 사용할 경우 날짜 선택 상자 내에서 날짜 형식을 설정합니다. 지원되는 형식은 Moment.js JavaScript 라이브러리를 기반으로 하며 대/소문자를 구분합니다.
STRING
해당 없음
N
N
HorizontalRangeZoomDateWidth
확대/축소가 활성화된 경우 가로 축에서 날짜 선택 상자의 너비를 설정합니다.
NUMBER
332px
N
N
HorizontalEndZoomLabel
범위 선택의 끝에 대한 텍스트 레이블을 지정합니다.
STRING
해당 없음
Y
Y
HorizontalSliderZoom
가로 축에서 최소값과 최대값 사이의 데이터를 표시할 수 있는 슬라이더 컨트롤을 추가합니다.
이 속성을 선택하면 HorizontalSliderZoomMinLabel 및 HorizontalSliderZoomMaxLabel 속성이 속성 목록에 표시됩니다.
BOOLEAN
False
Y
N
HorizontalSliderZoomMinLabel
슬라이더 확대/축소 컨트롤의 최소값에 대한 텍스트 레이블을 지정합니다.
STRING
해당 없음
Y
Y
HorizontalSliderZoomMaxLabel
슬라이더 확대/축소 컨트롤의 최대값에 대한 텍스트 레이블을 지정합니다.
STRING
해당 없음
Y
Y
InternalPadding
계열 간의 안쪽 여백을 설정합니다. 안쪽 여백은 막대 너비의 백분율입니다.
NUMBER
25
Y
N
Label
파레토 차트에 대해 표시되는 텍스트 레이블을 지정합니다.
STRING
파레토 차트
Y
Y
LabelAlignment
위젯 레이블의 텍스트를 왼쪽, 가운데 또는 오른쪽에 정렬합니다.
STRING
왼쪽
N
N
LabelPosition
텍스트 레이블의 위치를 맨 위 또는 맨 아래에서 설정합니다.
STRING
맨 위
N
N
LabelReset
차트 확대/축소를 재설정하는 버튼의 레이블을 지정합니다.
STRING
재설정
Y
Y
LabelType
파레토 차트의 레이블 유형을 머리글, 하위 머리글, 레이블 또는 본문으로 설정합니다.
STRING
하위 머리글
Y
N
LegendAlignment
범례 텍스트를 맨 위, 가운데 또는 맨 아래에 정렬합니다.
이 속성에 대해 사용할 수 있는 옵션은 LegendPosition 속성의 설정에 따라 달라집니다.
STRING
맨 위
N
N
LegendFilter
런타임에 차트를 필터링할 수 있는 범례 필터를 추가합니다.
BOOLEAN
False
N
N
LegendMarkerShapes
데이터 계열 범례의 마커 형태를 사각형, 원형 또는 없음으로 설정합니다.
STRING
사각형
N
N
LegendMaxWidth
범례 영역의 최대 너비를 설정합니다.
NUMBER
736
Y
N
LegendPosition
차트 범례의 위치를 맨 위, 오른쪽, 맨 아래 또는 왼쪽에서 설정합니다.
STRING
오른쪽
N
N
LineValuesPosition
값 레이블 위치를 선의 데이터 요소에 상대적으로 설정합니다.
사용할 수 있는 옵션은 위, 겹침 또는 아래입니다.
STRING
위
N
N
MultipleDataSources
차트에서 여러 데이터 소스의 데이터를 시각화할 수 있습니다.
이 속성을 선택하면 추가 DataSource 및 XAxisField 속성이 속성 목록에 표시됩니다.
BOOLEAN
False
N
N
Notes
차트의 메모 영역 내에 표시되는 텍스트를 지정합니다. 문자열을 입력하거나 로컬리제이션 토큰을 선택할 수 있습니다.
STRING
해당 없음
Y
Y
NotesAlignment
메모 영역 내의 텍스트를 왼쪽, 가운데 또는 오른쪽에 정렬합니다.
STRING
왼쪽
N
N
NotesPosition
메모 영역의 위치를 맨 위 또는 맨 아래에서 설정합니다.
STRING
맨 아래
N
N
NumberOfSeries
차트에 표시되는 데이터 계열 수를 설정합니다. 기본적으로 자동 설정은 인포테이블 데이터의 모든 계열을 표시합니다.
사용자의 설정에 따라 해당 번호 데이터 계열을 표시하는 데 사용할 수 있는 속성 목록에 추가 인포테이블 DataField 속성이 나타납니다. 또한 추가 DataSeriesStyle 상태 서식 적용 속성이 속성 목록에 표시됩니다.
NUMBER
자동
N
N
NumberOfYLabels
Y축에 표시할 레이블 수를 설정합니다.
NUMBER
자동
N
N
ResetToDefaultValue
이 위젯에 대한 입력을 기본값으로 재설정합니다.
해당 없음
해당 없음
Y
N
RulersInFront
데이터 값 앞에 눈금자를 표시합니다. 기본적으로 눈금자는 데이터 뒤에 표시됩니다.
BOOLEAN
False
Y
N
SecondYAxisLabel
두 번째 Y축에 대한 텍스트 레이블을 지정합니다.
STRING
퍼센트
Y
Y
SecondYAxisLabelAlignment
두 번째 Y축의 레이블을 맨 위, 가운데 또는 맨 아래에 정렬합니다.
STRING
가운데
N
N
SecondYAxisMaximumValues
두 번째 Y축 값에 대한 최대 범위를 설정합니다. 기본적으로 최대값은 100%입니다.
NUMBER
자동
Y
N
SecondYAxisMinimumValues
두 번째 Y축 값에 대한 최소 범위를 설정합니다. 기본적으로 최소값은 0%입니다.
NUMBER
자동
Y
N
SeriesClicked
차트의 데이터 요소를 클릭하면 이벤트가 트리거됩니다.
해당 없음
해당 없음
Y
N
ShowLineValues
차트 내의 줄에 표시되는 값 레이블을 표시합니다.
BOOLEAN
False
Y
N
ShowHideLegend
런타임에 차트 범례를 표시하거나 숨길 수 있는 표시/숨기기 버튼을 추가합니다.
BOOLEAN
False
N
N
ShowValues
차트의 값 레이블을 표시합니다.
BOOLEAN
False
Y
N
ShowXAxisRuler
X축 눈금자를 표시합니다.
BOOLEAN
False
Y
N
ShowYAxisRuler
Y축 눈금자를 표시합니다.
BOOLEAN
False
Y
N
SparkView
차트 시각화의 단순화 보기를 표시합니다.
레이블, 범례 및 눈금자를 숨기려면 이 속성을 선택합니다.
BOOLEAN
False
Y
N
ShowZoomButtons
가로 또는 세로 확대/축소가 활성화된 경우 차트 도구 모음의 확대/축소 버튼을 표시합니다.
BOOLEAN
False
N
N
TabSequence
TAB 키를 누를 때 위젯의 시퀀스 번호입니다.
NUMBER
0
N
N
ThresholdLine
누적 백분율에 대한 임계값을 표시하는 가로줄 또는 세로줄을 표시할 수 있습니다.
이 속성에 사용할 수 있는 옵션은 가로, 세로, 둘 다 또는 없음입니다.
STRING
가로
Y
N
ThresholdValue
임계선에 대한 백분율 값을 설정합니다.
NUMBER
80
Y
N
VerticalAxisMaxWidth
세로 축의 최대 너비를 설정합니다.
NUMBER
85
Y
N
XAxisField
차트에 표시되는 카테고리에 대한 데이터가 포함된 인포테이블 열을 지정합니다.
INFOTABLE
해당 없음
N
N
XAxisLabel
X축에 대한 텍스트 레이블을 지정합니다.
STRING
X축
Y
Y
XAxisLabelAlignment
X축 레이블을 왼쪽, 가운데 또는 오른쪽에 정렬합니다.
STRING
가운데
N
N
YAxisFormat
Y축 값의 형식을 설정합니다.
STRING
0000.0
Y
N
YAxisLabel
Y축에 대한 텍스트 레이블을 지정합니다.
STRING
Y축
Y
Y
YAxisLabelAlignment
Y축에 대한 텍스트 레이블을 맨 위, 가운데 또는 맨 아래에 정렬합니다.
STRING
가운데
N
N
YAxisMaximumValues
Y축 값에 대한 최대 범위를 설정합니다. 기본적으로 위젯 데이터를 기반으로 범위가 자동 계산됩니다. 차트 데이터에 더 큰 값이 포함되어 있으면 이 속성의 값이 무시됩니다.
NUMBER
자동
Y
N
YAxisMinimumValues
Y축 값에 대한 최소 범위를 설정합니다. 기본적으로 위젯 데이터를 기반으로 범위가 자동 계산됩니다. 차트 데이터에 더 작은 값이 포함되어 있으면 이 속성의 값이 무시됩니다.
NUMBER
자동
Y
N
YAxisValuesFormat
Y축의 값 레이블 형식을 설정합니다.
이 속성은 ShowValues를 True로 설정한 경우 사용할 수 있습니다.
STRING
Y
N
도움이 되셨나요?