@operato/scene-chartjs 7.0.8 → 7.0.10
Sign up to get free protection for your applications and to get access to all the features.
- 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
|