@@ -83,9 +83,350 @@ html에서 script태그를 사용하여 번들js와 css파일을 불러와 사
83
83
``` html
84
84
# 설치경로에서 가져오기: 직접 추가한 경우
85
85
<link rel =' stylesheet' href =' 파일경로/entry-ml.css' />
86
+ <link rel =' stylesheet' href =' 파일경로/bb.css' />
86
87
<script type =" text/javascript" src =' 파일경로/entry-ml.js' ></script >
87
88
```
88
89
90
+ ##### 추가로 bb.css 파일도 아래 코드를 복사하여 생성 후 추가해주시기 바랍니다.
91
+ <details >
92
+ <summary >bb.css</summary >
93
+
94
+
95
+ ``` css
96
+ .bb-color-pattern {
97
+ background-image : url (' #2d51ac;#4f80ff;#9fbaff;#a23941;#f16670;#fcad93;#423496;#6e5ae6;#c5b4ff;#2a7d7f;#00b6b1;#b3c3cd;' );
98
+ }
99
+
100
+ /* -- Chart --*/
101
+ .bb svg {
102
+ font-size : 12px ;
103
+ font-family : ' Meiryo' , sans-serif , Arial , ' nanumgothic' , ' Dotum' ;
104
+ line-height : 1 ;
105
+ }
106
+
107
+ .bb path ,
108
+ .bb line {
109
+ fill : none ;
110
+ stroke : #2c313d ;
111
+ }
112
+
113
+ .bb text ,
114
+ .bb .bb-button {
115
+ -webkit-user-select : none ;
116
+ -moz-user-select : none ;
117
+ -ms-user-select : none ;
118
+ user-select : none ;
119
+ fill : #2c313d ;
120
+ font-size : 11px ;
121
+ }
122
+
123
+ .bb-legend-item-title ,
124
+ .bb-xgrid-focus ,
125
+ .bb-ygrid ,
126
+ .bb-event-rect ,
127
+ .bb-bars path {
128
+ shape-rendering : crispEdges ;
129
+ }
130
+
131
+ /* -- Axis --*/
132
+ .bb-axis {
133
+ shape-rendering : crispEdges ;
134
+ }
135
+
136
+ .bb-axis-y text ,
137
+ .bb-axis-y2 text {
138
+ fill : #2c313d ;
139
+ }
140
+
141
+ .bb-event-rects {
142
+ fill-opacity : 1 !important ;
143
+ }
144
+ .bb-event-rects .bb-event-rect {
145
+ fill : transparent ;
146
+ }
147
+ .bb-event-rects .bb-event-rect._active_ {
148
+ fill : rgba (39 , 201 , 3 , 0.05 );
149
+ }
150
+
151
+ .tick._active_ text {
152
+ fill : #00c83c !important ;
153
+ }
154
+
155
+ /* -- Grid --*/
156
+ .bb-grid line {
157
+ stroke : #f1f1f1 ;
158
+ }
159
+
160
+ .bb-grid .bb-ygrid :last-child {
161
+ stroke : #e9e9e9 ;
162
+ }
163
+
164
+ .bb-xgrid-focus line {
165
+ stroke : #ddd ;
166
+ }
167
+
168
+ /* -- Text on Chart --*/
169
+ .bb-text.bb-empty {
170
+ fill : #767676 ;
171
+ }
172
+
173
+ /* -- Line --*/
174
+ .bb-line {
175
+ stroke-width : 1px ;
176
+ }
177
+
178
+ /* -- Point --*/
179
+ .bb-circle._expanded_ {
180
+ fill : #fff !important ;
181
+ stroke-width : 2px ;
182
+ stroke : red ;
183
+ }
184
+
185
+ rect .bb-circle._expanded_ ,
186
+ use .bb-circle._expanded_ {
187
+ stroke-width : 1px ;
188
+ }
189
+
190
+ .bb-selected-circle {
191
+ fill : white ;
192
+ stroke-width : 2px ;
193
+ }
194
+
195
+ /* -- Bar --*/
196
+ .bb-bar {
197
+ stroke-width : 0 ;
198
+ }
199
+ .bb-bar._expanded_ {
200
+ fill-opacity : 0.75 ;
201
+ }
202
+
203
+ /* -- Focus --*/
204
+ .bb-target.bb-focused {
205
+ opacity : 1 ;
206
+ }
207
+ .bb-target.bb-focused path .bb-line ,
208
+ .bb-target.bb-focused path .bb-step {
209
+ stroke-width : 2px ;
210
+ }
211
+
212
+ .bb-target.bb-defocused {
213
+ opacity : 0.3 !important ;
214
+ }
215
+
216
+ /* -- Region --*/
217
+ .bb-region {
218
+ fill : steelblue ;
219
+ fill-opacity : 0.1 ;
220
+ }
221
+ .bb-region.selected rect {
222
+ fill : #27c903 ;
223
+ }
224
+
225
+ /* -- Zoom region --*/
226
+ .bb-zoom-brush {
227
+ fill-opacity : 0.1 ;
228
+ }
229
+
230
+ /* -- Brush --*/
231
+ .bb-brush .extent {
232
+ fill-opacity : 0.1 ;
233
+ }
234
+
235
+ /* -- Select - Drag --*/
236
+ /* -- Legend --*/
237
+ .bb-legend-item {
238
+ -webkit-user-select : none ;
239
+ -moz-user-select : none ;
240
+ -ms-user-select : none ;
241
+ user-select : none ;
242
+ }
243
+
244
+ .bb-legend-item-hidden {
245
+ opacity : 0.15 ;
246
+ }
247
+
248
+ .bb-legend-background {
249
+ opacity : 0.75 ;
250
+ fill : white ;
251
+ stroke : lightgray ;
252
+ stroke-width : 1 ;
253
+ }
254
+
255
+ /* -- Title --*/
256
+ .bb-title {
257
+ font-size : 14px ;
258
+ }
259
+
260
+ /* -- Tooltip --*/
261
+ .bb-tooltip-container {
262
+ z-index : 10 ;
263
+ font-family : ' Meiryo' , sans-serif , Arial , ' nanumgothic' , ' Dotum' ;
264
+ -webkit-user-select : none ;
265
+ -moz-user-select : none ;
266
+ -ms-user-select : none ;
267
+ user-select : none ;
268
+ }
269
+
270
+ .bb-tooltip {
271
+ border-collapse : separate ;
272
+ border-spacing : 0 ;
273
+ empty-cells : show ;
274
+ border : 1px solid #999 ;
275
+ background-color : #fff ;
276
+ text-align : left ;
277
+ font-size : 11px ;
278
+ }
279
+ .bb-tooltip th {
280
+ font-size : 12px ;
281
+ padding : 4px 8px ;
282
+ text-align : left ;
283
+ border-bottom : solid 1px #eee ;
284
+ }
285
+ .bb-tooltip td {
286
+ padding : 4px 6px ;
287
+ background-color : #fff ;
288
+ }
289
+ .bb-tooltip td :first-child {
290
+ padding-left : 8px ;
291
+ }
292
+ .bb-tooltip td :last-child {
293
+ padding-right : 8px ;
294
+ }
295
+ .bb-tooltip td > span ,
296
+ .bb-tooltip td > svg {
297
+ display : inline-block ;
298
+ width : 10px ;
299
+ height : 10px ;
300
+ margin-right : 6px ;
301
+ border-radius : 5px ;
302
+ vertical-align : middle ;
303
+ }
304
+ .bb-tooltip td .value {
305
+ border-left : 1px solid transparent ;
306
+ }
307
+ .bb-tooltip .bb-tooltip-title {
308
+ display : inline-block ;
309
+ color : #aaa ;
310
+ line-height : 20px ;
311
+ }
312
+ .bb-tooltip .bb-tooltip-detail table {
313
+ border-collapse : collapse ;
314
+ border-spacing : 0 ;
315
+ }
316
+ .bb-tooltip .bb-tooltip-detail .bb-tooltip-name ,
317
+ .bb-tooltip .bb-tooltip-detail .bb-tooltip-value {
318
+ font-size : 11px ;
319
+ line-height : 13px ;
320
+ padding : 4px 0 3px ;
321
+ color : #444 ;
322
+ text-align : left ;
323
+ font-weight : normal ;
324
+ }
325
+ .bb-tooltip .bb-tooltip-detail .bb-tooltip-value {
326
+ padding-left : 5px ;
327
+ font-weight : 800 ;
328
+ font-size : 12px ;
329
+ }
330
+
331
+ /* -- Area --*/
332
+ .bb-area {
333
+ stroke-width : 0 ;
334
+ opacity : 0.2 ;
335
+ }
336
+
337
+ /* -- Arc --*/
338
+ .bb-chart-arcs-title {
339
+ dominant-baseline : middle ;
340
+ font-size : 1.3em ;
341
+ }
342
+
343
+ .bb-chart-arcs-gauge-title {
344
+ dominant-baseline : middle ;
345
+ font-size : 2.7em ;
346
+ }
347
+
348
+ .bb-chart-arcs .bb-chart-arcs-background {
349
+ fill : #e0e0e0 ;
350
+ stroke : none ;
351
+ }
352
+
353
+ .bb-chart-arcs .bb-chart-arcs-gauge-unit {
354
+ fill : #000 ;
355
+ font-size : 16px ;
356
+ }
357
+
358
+ .bb-chart-arcs .bb-chart-arcs-gauge-min ,
359
+ .bb-chart-arcs .bb-chart-arcs-gauge-max {
360
+ fill : #777 ;
361
+ }
362
+
363
+ .bb-chart-arcs .bb-chart-arcs-title {
364
+ font-size : 16px !important ;
365
+ fill : #000 ;
366
+ font-weight : 600 ;
367
+ }
368
+
369
+ .bb-chart-arcs path .empty {
370
+ fill : #eaeaea ;
371
+ stroke-width : 0 ;
372
+ }
373
+
374
+ .bb-chart-arc .bb-gauge-value {
375
+ fill : #000 ;
376
+ }
377
+
378
+ .bb-chart-arc path {
379
+ stroke : #fff ;
380
+ }
381
+
382
+ .bb-chart-arc text {
383
+ fill : #fff ;
384
+ font-size : 13px ;
385
+ }
386
+
387
+ /* -- Radar --*/
388
+ .bb-chart-radars .bb-levels polygon {
389
+ fill : none ;
390
+ stroke : #848282 ;
391
+ stroke-width : 0.5px ;
392
+ }
393
+
394
+ .bb-chart-radars .bb-levels text {
395
+ fill : #848282 ;
396
+ }
397
+
398
+ .bb-chart-radars .bb-axis line {
399
+ stroke : #848282 ;
400
+ stroke-width : 0.5px ;
401
+ }
402
+
403
+ .bb-chart-radars .bb-axis text {
404
+ font-size : 1.15em ;
405
+ cursor : default ;
406
+ }
407
+
408
+ .bb-chart-radars .bb-shapes polygon {
409
+ fill-opacity : 0.2 ;
410
+ stroke-width : 1px ;
411
+ }
412
+
413
+ /* -- Button --*/
414
+ .bb-button {
415
+ position : absolute ;
416
+ top : 10px ;
417
+ right : 10px ;
418
+ }
419
+ .bb-button .bb-zoom-reset {
420
+ border : solid 1px #ccc ;
421
+ background-color : #fff ;
422
+ padding : 5px ;
423
+ border-radius : 5px ;
424
+ cursor : pointer ;
425
+ }
426
+
427
+ ```
428
+ </details >
429
+
89
430
<br >
90
431
91
432
<br >
0 commit comments