매쉬업 작성기 > 위젯 > 표준 위젯 > 콤보 차트 위젯(테마 적용 가능)
콤보 차트 위젯(테마 적용 가능)
개요
콤보 차트 위젯을 사용하면 열, 선, 영역 및 점과 같은 여러 마커 유형을 사용하여 차트에 데이터 계열을 나타낼 수 있습니다. 다양한 유형의 시각화를 사용하여 여러 데이터 집합을 오버레이하여 여러 데이터 계열에 걸쳐 단위의 수량을 비교할 수 있습니다. Y축은 수량을 나타내고 X축은 카테고리를 나타냅니다. 다양한 차트 시각화 유형을 사용하여 데이터를 표시하면 Y축에 대한 다양한 스케일을 더 쉽게 읽을 수 있습니다.
다음은 콤보 차트에 사용할 수 있는 몇 가지 기본 구성입니다.
선, 열, 영역 및 점을 사용하여 데이터 계열을 시각화합니다.
여러 소스의 데이터를 바인딩합니다.
데이터 계열의 누적 순서 ZIndex를 구성합니다.
상태 서식을 적용하여 값을 토대로 차트의 스타일을 지정합니다.
데이터 계열을 그룹화하고 누적시킵니다.
모범 사례
런타임에 차트 성능을 개선하기 위해 데이터 샘플링을 활성화된 상태로 유지합니다. 데이터 샘플링을 비활성화하면 차트에 여러 계열의 수천 개의 데이터 요소가 표시될 때 성능이 느려질 수 있습니다. 차트 데이터 집합이 작은 경우에만 샘플링을 비활성화해야 합니다.
데이터 형식
차트의 데이터 구조를 나타내는 필드 정의가 포함된 인포테이블을 생성해야 합니다. 인포테이블에 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, NUMBER 또는 DATETIME 기본 유형이 있어야 합니다. 각 행은 X축에 카테고리로 표시됩니다. 이 열에 대해 정의된 이름은 XAaxisField 위젯 속성에 대해 선택해야 하는 옵션입니다.
카테고리의 Y축 값과 범례 레이블을 정의합니다.
각 추가 데이터 계열의 Y축 값과 범례 레이블을 정의합니다.
기본 유형
STRING, NUMBER 또는 DATETIME
* 
차트의 데이터가 막대로 표시되면 X축 레이블이 자동으로 문자열로 변환됩니다. XAxisDateFormatToken 또는 XAxisFormat 속성을 사용하여 레이블의 서식을 지정할 수 있습니다. 축에 최소 및 최대 수를 설정하는 데 사용되는 속성은 무시되며 레이블은 인포테이블 소스의 순서에 따라 정렬됩니다.
NUMBER
NUMBER
행 예
x: 'Apple' - 여기서 Apple은 X축에 표시할 카테고리 이름입니다.
value1: 10 - 카테고리의 Y축 값
value2: 30 - 데이터 계열 N의 Y축 값
다음 이미지는 Y축에 대한 4개의 필드 정의가 있는 인포테이블에서 반환된 데이터의 예를 보여줍니다.
위젯 속성
콤보 차트 위젯의 속성은 다음과 같습니다.
속성 이름
설명
기본 유형
기본값
바인딩 가능 여부 (Y/N)
로컬리제이션 가능 여부 (Y/N)
AlignBarsAtZero
차트의 모든 Y축 막대를 0에 맞춥니다.
BOOLEAN
False
Y
N
AxisDisplayControl
런타임에 Y축의 가시성을 제어할 수 있는 구성 메뉴를 차트 도구 모음에 추가합니다.
BOOLEAN
False
Y
N
ChartType
차트에 계열 데이터를 표시하는 데 사용되는 기본 시각화 유형을 설정합니다. SeriesNType 속성을 사용하여 각 데이터 계열에 대해 이 선택을 수동으로 재정의할 수 있습니다.
STRING
N
N
CustomClass
이 위젯에 적용할 사용자 정의 CSS 클래스를 지정합니다. 여러 개의 클래스를 공백으로 구분하여 입력할 수 있습니다.
STRING
해당 없음
Y
N
Data
차트에 대한 인포테이블 데이터 소스입니다.
Infotable
해당 없음
Y
N
DataFieldN
데이터 계열 N에 사용할 인포테이블 필드를 지정합니다.
Infotable
해당 없음
N
N
DataLabelN
데이터 계열 N에 대해 대한 범례 영역에 표시할 레이블.
STRING
해당 없음
Y
Y
DataPointSelection
포인터 위치를 기준으로 선택할 데이터 요소를 지정합니다. 이 속성을 설정하여 세로 축, 가로 축 또는 두 축 모두에서 가장 가까운 데이터 요소를 선택할 수 있습니다. 옵션:
없음
포인터 위치
가장 가까운 가로 축
가장 가까운 세로 축
두 축 모두
STRING
해당 없음
Y
N
DataSeriesStyleN
차트의 데이터 계열 N에 대해 상태 서식을 적용할 수 있습니다. 데이터 값을 기반으로 계열의 스타일을 설정하여 추세 및 패턴을 보다 쉽게 파악할 수 있습니다.
상태 서식 적용
해당 없음
N
N
DirectSelectionZoom
차트에서 두 개의 데이터 항목을 선택하여 확대할 수 있습니다.
이 속성에 사용할 수 있는 옵션은 가로 축, 세로 축, 둘 다없음입니다.
이 속성은 HorizontalZoom 또는 VerticalZoom을 선택할 때 속성 목록에 표시됩니다.
STRING
없음
Y
N
DragSelectionZoom
보려는 데이터 범위 주위에 선택 상자를 그려 차트의 특정 부분을 확대할 수 있습니다.
이 속성에 사용할 수 있는 옵션은 가로 축, 세로 축, 둘 다없음입니다.
이 속성은 HorizontalZoom 또는 VerticalZoom을 선택할 때 속성 목록에 표시됩니다.
STRING
없음
Y
N
Disabled
매쉬업에서 위젯을 비활성화합니다.
BOOLEAN
해당 없음
Y
N
DisplaySeriesNOn
데이터 계열 N에 대해 Y축 또는 누적 그룹을 설정합니다.
STRING
N
N
EmptyChartIcon
차트가 비어 있을 때 표시할 아이콘을 지정합니다.
MEDIA
not visible
N
N
EmptyChartLabel
바인딩된 인포테이블에 데이터가 없을 때 표시할 텍스트를 지정합니다.
STRING
[[ChartStateLabelEmpty]]
N
Y
ErrorStateIcon
차트 데이터를 로드할 수 없을 때 표시할 아이콘을 지정합니다.
MEDIA
error
N
N
ErrorStateLabel
차트 데이터를 로드할 수 없을 때 표시할 텍스트를 지정합니다.
STRING
[[ChartStateLabelError]]
N
N
ExternalPadding
축의 안쪽 여백을 설정합니다. 안쪽 여백 값은 막대 너비의 백분율입니다.
NUMBER
25
Y
N
GroupPadding
계열 간의 안쪽 여백을 설정합니다. 안쪽 여백 값은 막대 너비의 백분율입니다.
NUMBER
25
Y
N
HideDataTooltips
차트의 데이터 요소를 마우스로 가리키거나 선택할 때 표시되는 도구 설명을 숨깁니다.
BOOLEAN
False
N
N
HideLegend
범례 영역을 숨깁니다.
BOOLEAN
False
Y
N
HideNotes
메모 영역을 숨깁니다.
BOOLEAN
False
Y
N
HideValues
차트의 값 레이블을 숨깁니다.
BOOLEAN
False
Y
N
HideXAxis
X축을 숨깁니다.
BOOLEAN
False
Y
N
HideYAxisN
데이터 계열 N에 대해 Y축을 숨깁니다.
BOOLEAN
False
Y
N
HorizontalAxisLabelsRotation
-180에서 180 사이의 값을 입력하여 가로 축의 레이블 회전 각도를 설정합니다.
NUMBER
자동으로 계산
N
N
HorizontalAxisMaxHeight
가로 축의 최대 높이를 설정합니다.
NUMBER
85
Y
N
HorizontalZoom
가로 축을 확대하거나 축소할 수 있습니다.
이 속성을 선택하면 HorizontalIntervalControl, HorizontalRangeZoom, HorizontalSliderZoom, DirectSelectionZoomDragSelectionZoom 속성이 속성 목록에 표시됩니다.
BOOLEAN
False
Y
N
HorizontalIntervalControl
특정 간격에 따라 가로 축을 확대할 수 있는 컨트롤을 추가합니다.
사용 가능한 옵션은 없음(기본 선택) 및 드롭다운 목록입니다.
드롭다운 목록을 선택하면 HorizontalIntervalControlLabelHorizontalIntervalData 속성이 속성 목록에 표시됩니다.
STRING
없음
N
N
HorizontalIntervalControlLabel
가로 축에 대해 간격 확대/축소 컨트롤의 텍스트 레이블을 지정합니다.
STRING
해당 없음
Y
Y
HorizontalIntervalData
간격 확대/축소 컨트롤 옵션에 대한 데이터 소스입니다.
수평 간격 드롭다운 목록에서 엔트리를 선택하면 선택한 기간 값 및 시작/끝 앵커 지점에 따라 차트가 확대됩니다.
INFOTABLE
해당 없음
Y
N
HorizontalIntervalAnchorPoint
데이터 집합 내에서 간격 범위의 앵커 위치를 선택할 수 있습니다.
데이터 집합의 시작에 간격을 배치하려면 시작을 선택하고 끝에 간격을 배치하려면 을 선택합니다.
예를 들어, 12개월 데이터 집합에서 3개월 간격을 지정할 경우 시작을 선택하여 데이터 집합의 처음 3개월을 표시하거나 을 선택하여 마지막 3개월을 표시할 수 있습니다.
이 속성은 ShowHorizontalAnchorPointControl 속성을 선택할 때 나타납니다.
STRING
시작
Y
N
HorizontalIntervalAnchorPointLabel
가로 축의 간격 앵커 지점 레이블을 지정합니다.
이 속성은 ShowHorizontalAnchorPointControl 속성을 선택할 때 나타납니다.
STRING
해당 없음
Y
Y
HorizontalRangeZoom
가로 축을 확대할 값 범위를 지정할 수 있는 컨트롤을 추가합니다.
이 속성을 선택하면 HorizontalStartZoomLabelHorizontalEndZoomLabel 속성이 속성 목록에 표시됩니다.
BOOLEAN
False
Y
N
HorizontalRangeZoomDateFormat
범위 선택 확대/축소를 사용할 경우 날짜 선택 상자 내에서 날짜 형식을 설정합니다. 지원되는 형식은 Moment.js JavaScript 라이브러리를 기반으로 하며 대/소문자를 구분합니다.
STRING
해당 없음
N
N
HorizontalRangeZoomDateWidth
확대/축소가 활성화된 경우 가로 축에서 날짜 선택 상자의 너비를 설정합니다.
NUMBER
332px
N
N
HorizontalStartZoomLabel
범위 선택 시작에 대한 텍스트 레이블을 지정합니다.
STRING
해당 없음
Y
Y
HorizontalEndZoomLabel
범위 선택의 끝에 대한 텍스트 레이블을 지정합니다.
STRING
해당 없음
Y
Y
HorizontalSliderZoom
가로 축에서 최소값과 최대값 사이의 데이터를 표시할 수 있는 슬라이더 컨트롤을 추가합니다.
이 속성을 선택하면 HorizontalSliderZoomMaxLabelHorizontalSliderZoomMinLabel 속성이 속성 목록에 표시됩니다.
BOOLEAN
False
Y
N
HorizontalSliderZoomMaxLabel
슬라이더 확대/축소 컨트롤의 최대값에 대한 레이블을 지정합니다.
STRING
해당 없음
Y
Y
HorizontalSliderZoomMinLabel
슬라이더 확대/축소 컨트롤의 최소값에 대한 레이블을 지정합니다.
STRING
해당 없음
Y
Y
InternalPadding
계열 간의 안쪽 여백을 설정합니다. 안쪽 여백 값은 막대 너비의 백분율입니다.
NUMBER
25
Y
N
Label
콤보 차트에 표시할 텍스트 레이블을 지정합니다.
STRING
[[ComboChart]]
Y
Y
LabelReset
차트 도구 모음의 재설정 버튼 내에 표시되는 레이블을 설정합니다.
STRING
재설정
Y
Y
LabelAlignment
위젯 레이블의 텍스트를 정렬합니다. 옵션: 없음, 왼쪽, 가운데, 오른쪽
STRING
왼쪽
N
N
LabelPosition
텍스트 레이블의 위치를 설정합니다. 옵션: 없음, 맨 위, 맨 아래, 왼쪽.
STRING
맨 위
N
N
LabelType
머리글, 하위 머리글, 레이블 또는 본문과 같이 콤보 차트의 레이블 유형을 설정합니다.
STRING
하위 머리글
Y
N
LegendAlignment
차트 범례를 정렬합니다.
STRING
왼쪽
N
N
LegendFilter
범례에서 데이터 계열의 표시 유형을 제어하는 데이터 계열 옆에 확인란을 추가합니다.
BOOLEAN
False
N
N
LegendMaxWidth
범례 영역의 최대 너비를 설정합니다.
NUMBER
736
Y
N
LegendPosition
차트 범례의 위치를 설정합니다. 옵션:
없음, 왼쪽, 가운데, 오른쪽.
STRING
왼쪽
N
N
LoadingIcon
차트 데이터를 로드할 때 표시할 아이콘을 지정합니다.
STRING
chart_loading_combo_pareto
N
N
Margin
이 속성을 비활성화되어 있습니다. 컨테이너에서 이 반응형 위젯에 대한 여백을 정의해야 합니다.
STRING
5
N
N
MarkerShape
차트의 데이터 요소에 대한 마커 형태를 설정합니다. 옵션: 없음, 원형, 사각형, 다이아몬드형.
STRING
원형
N
N
MultipleDataSources
차트에서 여러 소스의 데이터를 시각화할 수 있습니다.
BOOLEAN
False
N
NoDataSourceIcon
차트가 데이터 소스에 바인딩되어 있지 않을 때 표시할 아이콘을 지정합니다.
미디어
bind
N
N
NoDataSourceLabel
차트가 데이터 소스에 바인딩되어 있지 않을 때 표시할 텍스트를 지정합니다.
STRING
[[ChartStateLabelNoData]]
N
Y
Notes
차트의 메모 영역 내에 표시할 텍스트를 지정합니다. 문자열을 입력하거나 로컬리제이션 토큰을 선택할 수 있습니다.
STRING
해당 없음
Y
Y
NotesAlignment
메모 영역 내의 텍스트를 정렬합니다.
STRING
왼쪽
N
N
NotesPosition
메모 영역의 위치를 설정합니다.
STRING
맨 아래
N
N
NumberOfReferenceLines
차트에 표시할 참조선의 수를 설정합니다. 참조선은 특정 값과 관련된 차트 데이터를 강조 표시하는 데 사용됩니다. 최대 24개의 선을 추가할 수 있으며 각 선의 레이블, 축 및 값을 구성할 수 있습니다.
NUMBER
0
N
N
NumberOfSeries
차트에 표시할 데이터 계열 수를 설정합니다.
NUMBER
8
N
N
NumberOfStacks
차트에 표시할 데이터 계열 누적의 수를 설정합니다.
NUMBER
0
N
N
NumberOfXLabels
X축의 레이블 수를 설정합니다.
NUMBER
자동
Y
N
NumberOfYaxes
차트에 표시할 Y축의 수를 설정합니다.
NUMBER
1
N
N
PointerType
차트를 가리킬 때 포인터의 모양을 지정합니다. 안내선을 사용하여 축에 상대적인 데이터 값을 추적할 수 있습니다. 옵션: 없음, 표준, 가로줄, 세로줄, 십자 기호
STRING
표준
Y
N
ReferecneLineNLabel
참조선의 텍스트 레이블을 설정합니다.
STRING
Y
Y
Y
ReferecneLineNValue
참조선의 숫자 값을 설정합니다.
NUMBER
Y
N
Y
ReferenceLineNAxis
참조선에 사용할 축을 지정합니다.
STRING
N
N
N
ResetToDefaultValue
이 위젯에 대한 입력을 기본값으로 재설정합니다.
서비스
해당 없음
Y
N
ReverseXAxis
X축 값을 거꾸로 표시합니다.
BOOEALN
False
N
N
ReverseYAxis
Y축의 값 순서를 바꿉니다.
BOOEALN
False
N
N
RulersInFront
데이터 값 앞에 눈금자를 표시합니다. 기본적으로 눈금자는 데이터 뒤에 표시됩니다.
BOOEALN
False
Y
N
SampleSize
차트에서 대용량 데이터 집합을 시각화할 때 표시할 최대 데이터 요소 수를 설정합니다. 샘플링을 비활성화하려면 이 속성을 0으로 설정하십시오.
NUMBER
자동
Y
N
SelectedData
차트에서 선택한 데이터를 포함하는 인포테이블입니다.
INFOTABLE
해당 없음
Y
N
SelectedSeriesChanged
선택한 계열이 변경될 때 트리거되는 이벤트입니다.
이벤트
해당 없음
Y
N
SelectionMode
사용자가 동시에 선택할 수 있는 데이터 요소 수를 제어합니다. 사용자가 둘 이상의 데이터 요소를 선택할 수 있도록 하려면 '여러'를 선택합니다. 옵션: 없음, 기본값, 단일, 여러.
STRING
기본값
Y
N
Series1MarkerShape
차트에서 계열 1 데이터 요소의 마커 형태를 설정합니다.
STRING
기본값
N
N
Series1MarkerSize
데이터 계열 1의 마커 크기를 설정합니다.
NUMBER
8
Y
N
Series1Type
차트에 계열 1 데이터를 표시하는 데 사용되는 시각화 유형을 설정합니다.
STRING
기본값
N
N
Series1ZAxis
Z축의 계열 순서를 설정합니다. 기본적으로 모든 그룹은 동일한 Z축 값으로 설정됩니다. 누적된 그룹은 이 속성이 뒤에 오는 계열 유형에 따라 정렬됩니다.
NUMBER
0
N
N
SeriesClicked
차트의 데이터 요소를 클릭하면 이벤트가 트리거됩니다.
이벤트
해당 없음
Y
N
ShowChartBands
차트의 막대 카테고리에 예약된 공간을 강조 표시합니다. true로 설정하면 각 카테고리의 영역이 회색으로 음영 처리됩니다.
BOOLEAN
False
N
N
ShowDataLoading
데이터를 로드할 때 회전하는 아이콘을 표시합니다.
BOOLEAN
True
N
N
ShowHideLegend
런타임에 차트 범례를 표시하거나 숨길 수 있는 표시/숨기기 버튼을 추가합니다.
BOOLEAN
False
N
N
ShowHorizontalAnchorPointControl
가로 축에 대한 앵커 값을 조정하는 컨트롤을 추가합니다.
이 속성을 선택하면 HorizontalIntervalAnchorPointHorizontalIntervalAnchorPointLabel 속성이 속성 목록에 표시됩니다.
BOOLEAN
False
Y
N
ShowXAxis
X축 눈금자를 표시합니다.
BOOLEAN
False
Y
N
ShowYAxis
Y축 눈금자를 표시합니다.
BOOLEAN
False
Y
N
ShowXAxisRuler
X축 눈금자를 표시합니다.
BOOLEAN
False
Y
N
ShowYAxisRuler
Y축 눈금자를 표시합니다.
BOOLEAN
False
Y
N
ShowZeroValueRuler
값이 0인 눈금자를 표시합니다.
BOOLEAN
False
Y
N
SparkView
차트 시각화의 단순화 보기를 표시합니다. 레이블, 범례 및 눈금자를 숨기려면 이 속성을 활성화합니다.
BOOLEAN
False
Y
N
ShowZoomButtons
가로 또는 세로 확대/축소가 활성화된 경우 차트 도구 모음의 확대/축소 버튼을 표시합니다.
BOOLEAN
False
N
N
TabSequence
TAB 키를 누를 때 위젯의 시퀀스 번호입니다.
NUMBER
0
N
N
ValuesPosition
데이터 요소를 기준으로 데이터 값 레이블의 위치를 설정합니다.
STRING
N
N
ValuesPositionBar
차트 막대를 기준으로 데이터 값 레이블의 위치를 설정합니다.
STRING
막대 외부
N
N
ValuesTooltip
STRING
Y
Y
VerticalAxisMaxWidth
세로 축의 최대 너비를 설정합니다.
NUMBER
85
Y
N
VerticalZoom
세로 축을 확대하거나 축소할 수 있습니다.
BOOLEAN
False
Y
N
VerticalSliderZoom
세로 축에서 최소값과 최대값 사이의 데이터를 표시할 수 있는 슬라이더 컨트롤을 추가합니다.
이 속성을 선택하면 VerticalZoomMaxLabelVerticalZoomMinLabel 속성이 속성 목록에 표시됩니다.
BOOLEAN
False
Y
N
VerticalZoomMaxLabel
슬라이더 확대/축소 컨트롤의 최대값에 대한 텍스트 레이블을 지정합니다.
STRING
해당 없음
Y
Y
VerticalZoomMinLabel
슬라이더 확대/축소 컨트롤의 최소값에 대한 텍스트 레이블을 지정합니다.
STRING
해당 없음
Y
Y
Visible
활성화하면 매쉬업에 위젯이 표시됩니다.
BOOLEAN
True
Y
N
XAxisField
X축에 대한 데이터를 포함하는 인포테이블 필드를 선택합니다.
INFOTABLE
해당 없음
N
N
XAxisLabel
X축에 대한 텍스트 레이블을 지정합니다.
STRING
[[XAxis]]
Y
Y
XAxisLabelAlignment
X축 레이블을 정렬합니다.
STRING
왼쪽
N
N
XAxisType
X축 값의 형식 유형을 설정합니다.
STRING
문자열
Y
N
YAxesMaxWidth
Y축 영역의 최대 너비를 설정합니다. 영역이 최대 너비를 초과하면 스크롤 막대가 표시됩니다.
NUMBER
1200
Y
N
YAxisNFormat
Y축 N 값의 형식을 설정합니다.
STRING
0000.0
Y
N
YAxisNLabel
Y축 N의 텍스트 레이블을 지정합니다.
STRING
[[YAxis]]
Y
Y
YAxisNLabelAlignment
Y축 N의 레이블을 정렬합니다.
STRING
가운데
N
N
YAxisNMaximumValue
Y축 범위의 최대값을 설정합니다. 기본적으로 위젯 데이터를 기반으로 범위가 자동 계산됩니다.
NUMBER
자동
Y
N
YAxisNMinimumValue
Y축 범위의 최소값을 설정합니다. 기본적으로 위젯 데이터를 기반으로 범위가 자동 계산됩니다.
NUMBER
자동
Y
N
YAxisNNumberOfLabels
Y축 N의 레이블 수를 설정합니다.
NUMBER
자동
Y
N
YAxisNPosition
Y축 위치를 지정합니다. '자동'으로 설정하면 첫 번째 Y축이 기본으로 표시되고 나머지는 보조로 표시됩니다.
STRING
자동
N
N
YAxisNValuesFormat
Y축의 값 레이블 형식을 설정합니다.
이 속성은 HideValues를 False로 설정한 경우 사용할 수 있습니다.
STRING
Y
N
ZeroValueRuler
차트에서 0 값 눈금자의 표시 유형을 제어합니다. 기본 또는 보조 Y축에 대해서만 눈금자를 표시할 수 있습니다. 옵션: 기본 축, 보조 축, 없음, 둘 다.
STRING
없음
Y
N
도움이 되셨나요?