@operato/scene-chartjs 7.0.8 → 7.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/config-converter.js +6 -1
- package/dist/config-converter.js.map +1 -1
- package/dist/ox-chart.js +14 -0
- package/dist/ox-chart.js.map +1 -1
- package/helps/scene/component/chartjs.ja.md +364 -0
- package/helps/scene/component/chartjs.ko.md +211 -183
- package/helps/scene/component/chartjs.md +269 -242
- package/helps/scene/component/chartjs.ms.md +365 -0
- package/helps/scene/component/chartjs.zh.md +243 -212
- package/package.json +2 -2
- package/schema.graphql +175 -40
- package/src/config-converter.ts +8 -1
- package/src/ox-chart.ts +14 -0
- package/src/scene-chart.d.ts +2 -54
- package/translations/en.json +4 -1
- package/translations/ja.json +4 -1
- package/translations/ko.json +4 -1
- package/translations/ms.json +4 -1
- package/translations/zh.json +4 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -4,95 +4,93 @@
|
|
|
4
4
|
|
|
5
5
|
### 1.1. 공통 속성
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
|
|
8
|
+
- 범례 - 차트의 범례를 표시.
|
|
9
|
+
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
|
|
10
|
+
- 2축 - Y축을 좌우 2축으로 표현 여부, 2축 선택 시 Y보조축 및 Y보조축 옵션이 표현된다.
|
|
11
11
|
|
|
12
12
|
### 1.2. X축
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
- 데이터 참조 - 차트가 표현할 데이터의 필드명. X축에 표현될 데이터의 필드명을 입력한다. 아래와 같은 데이터를 표시할 시 'Date'가 된다.
|
|
15
15
|
![Chart-bar-테마][chart-bar-01]
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
- 제목 - X축에 원하는 제목(라벨) 입력
|
|
17
|
+
- 그리드 라인 - 세로방향의 눈금선 표현 여부
|
|
18
18
|
![X축 그리드][chart-bar-08]
|
|
19
|
-
|
|
19
|
+
- 눈금 표시 - X축 눈금 표시 여부
|
|
20
20
|
|
|
21
21
|
### 1.3. Y축
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
23
|
+
- 제목 - Y축에 원하는 제목(라벨) 입력
|
|
24
|
+
- 최소값 자동 - 최소값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
|
|
25
|
+
- 최소값 - 최소값 자동 해제 시 표시가 되며 눈금 최소값을 설정할 수 있다.
|
|
26
|
+
- 최대값 자동 - 최대값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
|
|
27
|
+
- 최대값 - 최대값 자동 해제 시 표시가 되며 눈금 최대값을 설정할 수 있다.
|
|
28
|
+
- 스텝 - 눈금 간격 설정
|
|
29
|
+
- 그리드 라인 - 가로방향의 눈금선 표현 여부
|
|
30
30
|
![Y축 그리드][chart-bar-12]
|
|
31
|
-
|
|
31
|
+
- 눈금 표시 - Y축 눈금 표시 여부
|
|
32
32
|
|
|
33
33
|
---
|
|
34
34
|
|
|
35
35
|
## 2. Mix Chart(수직 막대/라인 차트)
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
|
|
37
|
+
- 데이터를 막대모양과 라인모양의 형태를 섞어서 표현해주는 차트. **(믹스차트의 속성은 막대차트와 라인차트와 동일합니다.)**
|
|
38
|
+
- 데이터를 막대모양 또는 라인모양의 형태로 표현하거나 막대와 라인을 믹스해서 표현 가능. 여러개의 시리즈(필드)가 있을시엔 병렬막대 또는 누적막대로 표현이 가능
|
|
38
39
|
![chart-mix-차트 타입][chart-mix-02]
|
|
39
40
|
|
|
40
41
|
[chart-mix-02]: ../images/chart-mix-02.png
|
|
42
|
+
|
|
41
43
|
### 2.1. 시리즈
|
|
42
44
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
|
|
46
|
+
- **공통**
|
|
47
|
+
- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의,
|
|
46
48
|
아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'과 'Bad'가 된다.
|
|
47
49
|
![Data Refer][chart-bar-01]
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
- 유형 - 해당 시리즈를 라인(line)차트로 표현할지 아니면 바차(bar)트로 표현할지
|
|
51
|
+
- 라벨 - 범례명
|
|
52
|
+
- 색상 - 차트에 표현될 시리즈의 색상 지정
|
|
53
|
+
- 누적 그룹 - 동일한 누적 그룹에 포함되어 있는 시리즈들의 값을 누적하여 그라프에 표현한다.
|
|
52
54
|
![누적 그룹][chart-bar-02]
|
|
53
|
-
|
|
55
|
+
- 대상 축 - 2축 적용 시 대상축에 대한 설정 필드가 나타나는데, 대상축은 해당 시리즈의 정보가 참조하는 축(축의 눈금)을 가르킨다.
|
|
54
56
|
![대상 축][chart-bar-03]
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
- 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
|
|
58
|
+
- 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
|
|
59
|
+
- 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
|
|
60
|
+
- 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
|
|
58
61
|
값표시가 선택되면 아래와 같은 항목이 나타난다.
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
62
|
+
- 폰트 색상 - 시리즈 라벨의 색상 설정
|
|
63
|
+
- 크기 - 시리즈 라벨 폰트 크기 설정
|
|
64
|
+
- 위치 - 시리즈 라벨 폰트위치 설정
|
|
65
|
+
- 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
|
|
66
|
+
- 회전 - 시리즈 라벡의 회전 각도
|
|
67
|
+
- **유형이 line인 경우**
|
|
68
|
+
- 긴장도 - 직선을 사용한 그래프(angled), 부드러운 선을 사용한 그래프(smooth)
|
|
69
|
+
- 경계부분 넓이 - 라인의 굵기 설정
|
|
70
|
+
- 포인트 모양 - 라인의 각 꼭지점의 포인트 모양
|
|
71
|
+
- 포인트 크기 - 라인의 각 꼭지점의 크기
|
|
72
|
+
- 채우기 - 라인이 그려진 공간을 공통 속정의 색상을 이용하여 데이터를 표시하는 도형을 채운다.
|
|
69
73
|
|
|
70
74
|
### 2.2. X축
|
|
71
75
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
76
|
+
- 일반 - [공통 속성](#1.2.-X축)에서 정의한 내용과 같음
|
|
77
|
+
- 막대 간격 - 막대와 막대 사이의 간격이며 막대의 크기에 영향 준다.
|
|
78
|
+
- 눈금 간격 - 눈금 사이의 간격이며 막대의 크기에 영향 준다.
|
|
75
79
|
|
|
76
80
|
### 2.3. Y축
|
|
77
81
|
|
|
78
|
-
|
|
82
|
+
- [공통 속성](#1.3.-Y축)에서 정의한 내용과 같음
|
|
79
83
|
|
|
80
84
|
### 2.4. Y보조축(2축 선택 시 표현 됨)
|
|
81
85
|
|
|
82
|
-
|
|
83
|
-
|
|
86
|
+
- 설정 속성은 Y축 설정 방법과 같다.
|
|
84
87
|
|
|
85
88
|
[chart-bar-01]: ../images/chart-bar-01.png
|
|
86
|
-
|
|
87
89
|
[chart-bar-02]: ../images/chart-bar-02.png
|
|
88
|
-
|
|
89
90
|
[chart-bar-03]: ../images/chart-bar-03.png
|
|
90
|
-
|
|
91
91
|
[chart-bar-08]: ../images/chart-bar-08.png
|
|
92
|
-
|
|
93
92
|
[chart-bar-12]: ../images/chart-bar-12.png
|
|
94
93
|
|
|
95
|
-
|
|
96
94
|
---
|
|
97
95
|
|
|
98
96
|
## 3. 수평 막대 차트
|
|
@@ -101,131 +99,145 @@
|
|
|
101
99
|
|
|
102
100
|
### 3.1. 공통 속성
|
|
103
101
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
102
|
+
- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
|
|
103
|
+
- 범례 - 차트의 범례를 표시.
|
|
104
|
+
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
|
|
105
|
+
- 2축 - Y축을 좌우 2축으로 표현 여부, 2축 선택 시 Y보조축 및 Y보조축 옵션이 표현된다.
|
|
109
106
|
|
|
110
107
|
### 3.2. 시리즈
|
|
111
108
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
109
|
+
- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
|
|
110
|
+
- **공통**
|
|
111
|
+
- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'과 'Bad'가 된다
|
|
112
|
+
- 라벨 - 범례명
|
|
113
|
+
- 색상 - 차트에 표현될 시리즈의 색상 지정
|
|
114
|
+
- 누적 그룹 - 동일한 누적 그룹에 포함되어 있는 시리즈들의 값을 누적하여 그라프에 표현한다.
|
|
115
|
+
- 대상 축 - 2축 적용 시 대상축에 대한 설정 필드가 나타나는데, 대상축은 해당 시리즈의 정보가 참조하는 축(축의 눈금)을 가르킨다.
|
|
116
|
+
- 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
|
|
117
|
+
- 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
|
|
118
|
+
- 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
|
|
119
|
+
- 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
|
|
120
|
+
값표시가 선택되면 아래와 같은 항목이 나타난다.
|
|
121
|
+
- 폰트 색상 - 시리즈 라벨의 색상 설정
|
|
122
|
+
- 크기 - 시리즈 라벨 폰트 크기 설정
|
|
123
|
+
- 위치 - 시리즈 라벨 폰트위치 설정
|
|
124
|
+
- 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
|
|
125
|
+
- 회전 - 시리즈 라벡의 회전 각도
|
|
126
126
|
|
|
127
127
|
### 3.3. X축
|
|
128
128
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
129
|
+
- 데이터 참조 - 차트가 표현할 데이터의 필드명. X축에 표현될 데이터의 필드명을 입력한다. 아래와 같은 데이터를 표시할 시 'Date'가 된다.
|
|
130
|
+
- 제목 - X축에 원하는 제목(라벨) 입력
|
|
131
|
+
- 그리드 라인 - 세로방향의 눈금선 표현 여부
|
|
132
|
+
- 눈금 표시 - X축 눈금 표시 여부
|
|
133
133
|
|
|
134
134
|
### 3.4. Y축
|
|
135
135
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
136
|
+
- 제목 - Y축에 원하는 제목(라벨) 입력
|
|
137
|
+
- 최소값 자동 - 최소값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
|
|
138
|
+
- 최소값 - 최소값 자동 해제 시 표시가 되며 눈금 최소값을 설정할 수 있다.
|
|
139
|
+
- 최대값 자동 - 최대값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
|
|
140
|
+
- 최대값 - 최대값 자동 해제 시 표시가 되며 눈금 최대값을 설정할 수 있다.
|
|
141
|
+
- 스텝 - 눈금 간격 설정
|
|
142
|
+
- 그리드 라인 - 가로방향의 눈금선 표현 여부
|
|
143
|
+
- 눈금 표시 - Y축 눈금 표시 여부
|
|
145
144
|
|
|
146
145
|
[chart-horizontal-bar-01]: ../images/chart-horizontal-bar-01.png
|
|
147
146
|
|
|
148
147
|
---
|
|
148
|
+
|
|
149
149
|
## 4. 라인 차트
|
|
150
150
|
|
|
151
151
|
데이터를 라인모양의 형태로 표현해주는 차트. (중복되는 속성은 막대차트를 참조)
|
|
152
152
|
|
|
153
153
|
### 4.1. 속성
|
|
154
154
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
155
|
+
- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
|
|
156
|
+
- 범례 - 차트의 범례를 표시.
|
|
157
|
+
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
|
|
158
|
+
- 2축 - Y축을 좌우 2축으로 표현 여부, 2축 선택 시 Y보조축 및 Y보조축 옵션이 표현된다.
|
|
159
159
|
|
|
160
160
|
### 4.2. 시리즈
|
|
161
161
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
162
|
+
- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
|
|
163
|
+
- **공통**
|
|
164
|
+
- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'과 'Bad'가 된다.
|
|
165
|
+
![Data Refer][chart-line-01]
|
|
166
|
+
- 긴장도 - 직선을 사용한 그래프(angled), 부드러운 선을 사용한 그래프(smooth)
|
|
167
|
+
- 경계부분 넓이 - 라인의 굵기 설정
|
|
168
|
+
- 라벨 - 범례명
|
|
169
|
+
- 색상 - 차트에 표현될 시리즈의 색상 지정
|
|
170
|
+
- 포인트 모양 - 라인의 각 꼭지점의 포인트 모양
|
|
171
|
+
- 포인트 크기 - 라인의 각 꼭지점의 크기
|
|
172
|
+
- 누적 그룹 - 동일한 누적 그룹에 포함되어 있는 시리즈들의 값을 누적하여 그라프에 표현한다.
|
|
173
|
+
- 채우기 - 라인이 그려진 공간을 공통 속정의 색상을 이용하여 데이터를 표시하는 도형을 채운다.
|
|
174
|
+
- 대상 축 - 2축 적용 시 대상축에 대한 설정 필드가 나타나는데, 대상축은 해당 시리즈의 정보가 참조하는 축(축의 눈금)을 가르킨다.
|
|
175
|
+
- 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
|
|
176
|
+
- 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
|
|
177
|
+
- 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
|
|
178
|
+
- 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
|
|
179
|
+
값표시가 선택되면 아래와 같은 항목이 나타난다.
|
|
180
|
+
- 폰트 색상 - 시리즈 라벨의 색상 설정
|
|
181
|
+
- 크기 - 시리즈 라벨 폰트 크기 설정
|
|
182
|
+
- 위치 - 시리즈 라벨 폰트위치 설정
|
|
183
|
+
- 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
|
|
184
|
+
- 회전 - 시리즈 라벡의 회전 각도
|
|
181
185
|
|
|
182
186
|
### 4.3. X축
|
|
183
187
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
+
- 데이터 참조 - 차트가 표현할 데이터의 필드명. X축에 표현될 데이터의 필드명을 입력한다. 아래와 같은 데이터를 표시할 시 'Date'가 된다.
|
|
189
|
+
- 제목 - X축에 원하는 제목(라벨) 입력
|
|
190
|
+
- 그리드 라인 - 세로방향의 눈금선 표현 여부
|
|
191
|
+
- 눈금 표시 - X축 눈금 표시 여부
|
|
188
192
|
|
|
189
193
|
### 4.4. Y축
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
194
|
+
|
|
195
|
+
- 제목 - Y축에 원하는 제목(라벨) 입력
|
|
196
|
+
- 최소값 자동 - 최소값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
|
|
197
|
+
- 최소값 - 최소값 자동 해제 시 표시가 되며 눈금 최소값을 설정할 수 있다.
|
|
198
|
+
- 최대값 자동 - 최대값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
|
|
199
|
+
- 최대값 - 최대값 자동 해제 시 표시가 되며 눈금 최대값을 설정할 수 있다.
|
|
200
|
+
- 스텝 - 눈금 간격 설정
|
|
201
|
+
- 그리드 라인 - 가로방향의 눈금선 표현 여부
|
|
202
|
+
- 눈금 표시 - Y축 눈금 표시 여부
|
|
198
203
|
|
|
199
204
|
[chart-line-01]: ../images/chart-line-01.png
|
|
200
205
|
|
|
201
206
|
---
|
|
207
|
+
|
|
202
208
|
## 5. 레이더 차트
|
|
203
209
|
|
|
204
210
|
데이터를 레이더 모양으로 표현해주는 차트. 원형 차트의 데이터를 여러개의 라인 형태로 표현
|
|
211
|
+
|
|
205
212
|
### 5.1. 공통 속성
|
|
206
213
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
214
|
+
- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
|
|
215
|
+
- 범례 - 차트의 범례를 표시.
|
|
216
|
+
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
|
|
210
217
|
|
|
211
218
|
### 5.2. 시리즈
|
|
212
219
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
220
|
+
- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
|
|
221
|
+
- **공통**
|
|
222
|
+
- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'과 'Bad'가 된다.
|
|
223
|
+
![Data Refer][chart-radar-01]
|
|
224
|
+
- 라벨 - 범례명
|
|
225
|
+
- 색상 - 차트에 표현될 시리즈의 색상 지정
|
|
226
|
+
- 누적 그룹 - 동일한 누적 그룹에 포함되어 있는 시리즈들의 값을 누적하여 그라프에 표현한다.
|
|
227
|
+
- 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
|
|
228
|
+
- 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
|
|
229
|
+
- 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
|
|
230
|
+
- 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
|
|
231
|
+
값표시가 선택되면 아래와 같은 항목이 나타난다.
|
|
232
|
+
- 폰트 색상 - 시리즈 라벨의 색상 설정
|
|
233
|
+
- 크기 - 시리즈 라벨 폰트 크기 설정
|
|
234
|
+
- 위치 - 시리즈 라벨 폰트위치 설정
|
|
235
|
+
- 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
|
|
236
|
+
- 회전 - 시리즈 라벡의 회전 각도
|
|
226
237
|
|
|
227
238
|
### 5.3. 축
|
|
228
|
-
|
|
239
|
+
|
|
240
|
+
- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 참조할 데이터는 line이 된다.
|
|
229
241
|
![Data Refer][chart-radar-01]
|
|
230
242
|
|
|
231
243
|
[chart-radar-01]: ../images/chart-radar-01.png
|
|
@@ -238,29 +250,33 @@
|
|
|
238
250
|
|
|
239
251
|
### 6.1. 공통 속성
|
|
240
252
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
253
|
+
- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
|
|
254
|
+
- 범례 - 차트의 범례를 표시.
|
|
255
|
+
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
|
|
244
256
|
|
|
245
257
|
### 6.2. 시리즈
|
|
246
258
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
+
- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
|
|
260
|
+
- **공통**
|
|
261
|
+
- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'가 된다.
|
|
262
|
+
![Data Refer][chart-polar-01]
|
|
263
|
+
- 라벨 - 범례명
|
|
264
|
+
- 색상 - 차트에 표현될 시리즈의 색상 지정
|
|
265
|
+
- 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
|
|
266
|
+
- 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
|
|
267
|
+
- 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
|
|
268
|
+
- 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
|
|
269
|
+
값표시가 선택되면 아래와 같은 항목이 나타난다.
|
|
270
|
+
- 폰트 색상 - 시리즈 라벨의 색상 설정
|
|
271
|
+
- 크기 - 시리즈 라벨 폰트 크기 설정
|
|
272
|
+
- 위치 - 시리즈 라벨 폰트위치 설정
|
|
273
|
+
- 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
|
|
274
|
+
- 회전 - 시리즈 라벡의 회전 각도
|
|
259
275
|
|
|
260
276
|
### 6.3. 축
|
|
261
|
-
* 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 참조할 데이터는 hobby가 된다.
|
|
262
|
-
![Data Refer][chart-polar-01]
|
|
263
277
|
|
|
278
|
+
- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 참조할 데이터는 hobby가 된다.
|
|
279
|
+
![Data Refer][chart-polar-01]
|
|
264
280
|
|
|
265
281
|
[chart-polar-01]: ../images/chart-polar-01.png
|
|
266
282
|
|
|
@@ -272,27 +288,33 @@
|
|
|
272
288
|
|
|
273
289
|
### 7.1. 공통 속성
|
|
274
290
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
291
|
+
- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
|
|
292
|
+
- 범례 - 차트의 범례를 표시.
|
|
293
|
+
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
|
|
278
294
|
|
|
279
295
|
### 7.2. 시리즈
|
|
280
296
|
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
297
|
+
- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
|
|
298
|
+
- **공통**
|
|
299
|
+
- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'가 된다.
|
|
300
|
+
![Data Refer][chart-pie-01]
|
|
301
|
+
- 라벨 - 범례명
|
|
302
|
+
- 색상 - 차트에 표현될 시리즈의 색상 지정
|
|
303
|
+
- 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
|
|
304
|
+
- 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
|
|
305
|
+
- 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
|
|
306
|
+
- 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
|
|
307
|
+
- 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
|
|
308
|
+
값표시가 선택되면 아래와 같은 항목이 나타난다.
|
|
309
|
+
- 폰트 색상 - 시리즈 라벨의 색상 설정
|
|
310
|
+
- 크기 - 시리즈 라벨 폰트 크기 설정
|
|
311
|
+
- 위치 - 시리즈 라벨 폰트위치 설정
|
|
312
|
+
- 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
|
|
313
|
+
- 회전 - 시리즈 라벡의 회전 각도
|
|
293
314
|
|
|
294
315
|
### 7.3. 축
|
|
295
|
-
|
|
316
|
+
|
|
317
|
+
- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 참조할 데이터는 line이 된다.
|
|
296
318
|
![Data Refer][chart-pie-01]
|
|
297
319
|
|
|
298
320
|
[chart-pie-01]: ../images/chart-pie-01.png
|
|
@@ -300,33 +322,39 @@
|
|
|
300
322
|
---
|
|
301
323
|
|
|
302
324
|
## 8. 도넛 차트
|
|
325
|
+
|
|
303
326
|
![컴포넌트-Chart-doughnut][chart-doughnut-01]
|
|
304
327
|
|
|
305
328
|
데이터를 도넛 모양으로 표현해주는 차트.
|
|
306
329
|
|
|
307
330
|
### 8.1. 공통 속성
|
|
308
331
|
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
332
|
+
- 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
|
|
333
|
+
- 범례 - 차트의 범례를 표시.
|
|
334
|
+
- 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
|
|
312
335
|
|
|
313
336
|
### 8.2. 시리즈
|
|
314
337
|
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
338
|
+
- 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
|
|
339
|
+
- **공통**
|
|
340
|
+
- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'가 된다.
|
|
341
|
+
![Data Refer][chart-doughnut-01]
|
|
342
|
+
- 라벨 - 범례명
|
|
343
|
+
- 색상 - 차트에 표현될 시리즈의 색상 지정
|
|
344
|
+
- 값형식 - 값 표시가 될 때 값의 숫자형식을 지정할 수 있다.
|
|
345
|
+
- 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
|
|
346
|
+
- 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 )
|
|
347
|
+
- 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
|
|
348
|
+
값표시가 선택되면 아래와 같은 항목이 나타난다.
|
|
349
|
+
- 폰트 색상 - 시리즈 라벨의 색상 설정
|
|
350
|
+
- 크기 - 시리즈 라벨 폰트 크기 설정
|
|
351
|
+
- 위치 - 시리즈 라벨 폰트위치 설정
|
|
352
|
+
- 오프셋 - 시리즈 라벨의 상대위치(위치에 대한 상대위치를 의미함)
|
|
353
|
+
- 회전 - 시리즈 라벡의 회전 각도
|
|
327
354
|
|
|
328
355
|
### 8.3. 축
|
|
329
|
-
|
|
356
|
+
|
|
357
|
+
- 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 참조할 데이터는 line이 된다.
|
|
330
358
|
![Data Refer][chart-doughnut-01]
|
|
331
359
|
|
|
332
360
|
[chart-doughnut-01]: ../images/chart-doughnut-01.png
|