-
제품
- 웹콘텐츠관리
- API 서버
- 웹프레임워크
- UI컴포넌트
- 텍사노미
-
자료
- 트라이얼
- 제품문서
- 동영상
-
가격/구매
- UI컴포넌트
- 구매문의
cylinder 의 전반적인 스타일에 대한 값을 정의
var defaultStyles = {
layout : {
position : {
x : 0,
y : 0
},
area : {
color : '#f8f8f8',
border :'#c1c6cc'
}
},
object : {
width: 360,
height: 240
},
counter : {
x: 0 ,
y: 0 ,
width : 80 ,
height: 40,
radius : 2
color : '#fcfcfc',
border : '#bdc2ca',
text : {
family : 'LCDMono',
size : 1,
weight : 800,
color:'#484b4e'
}
},
axis : {
block : 10 ,
interval : 4 ,
text : {
num : 5,
family: defaultFont,
size: 12,
weight: "bold",
align: "end",
color : "#797f85"
},
blockLine: {
color: "#a3aab1",
length : 15
},
intervalLine: {
color: "#c3c8cd",
length: 7.5
}
},
cylinder : {
border :'#c7cfd9',
fill : {
color : "100-#2bcdba-#6bdccf",
opacity: 0.3,
border : 'none'
},
current : {
color : '#6bdccf'
},
prevDataLine : {
color : '#c7cfd9'
}
},
pointer: {
max : {
bar : {
color : '#ff625f',
length :10
},
font : {
size : 10,
color : '#ff625f',
align: 'start',
position : -18,
family: 'defaultFont'
}
},
avg : {
bar : {
color : '#2bcdba',
length :10
},
font : {
size : 10,
color : '#2bcdba',
align: 'start',
position : -18,
family: 'defaultFont'
}
},
target : {
color : '#8397a6'
}
}
};Cylinder 차트의 레이아웃 스타일
| default | type | 설명 | |||
|---|---|---|---|---|---|
| layout | position | x | 0 | number | cylinder 의 X 축 위치, SVG Element 의 중앙 ( 0 ) 을 기준으로 좌, 우 위치 값 |
| y | 0 | number | cylinder 의 Y 축 위치, SVG Element 의 중앙 ( 0 ) 을 기준으로 상, 하 위치 값 | ||
| area | color | '#f8f8f8' | string | SVG 전체 영역의 배경 색상 | |
| border | '#c1c6cc' | string | SVG 전체 영역의 테두리 색상 |
var styles = {
layout: {
position: {
x : 50,
y : 50
},
area : {
color : '#f8f8f8',
border : '#c1c6cc'
}
}
}cylinder의 가로 넓이를 설정합니다.
| default | type | 설명 | ||
|---|---|---|---|---|
| object | width | 360 | number |
( ※options.use.resize = true 일때만 사용 가능) |
cylinder의 세로 높이를 설정합니다.
| default | type | 설명 | ||
|---|---|---|---|---|
| object | height | 240 | number |
( ※options.use.resize = true 일때만 사용 가능) |
var styles = {
object: {
width : 400,
height : 250
}
}
치수표시판의 스타일 설정
| default | type | 설명 | |||
|---|---|---|---|---|---|
| counter | x | 0 | number | counter의 X 축 위치, default로 그려진 위치를 기준으로 좌, 우 위치 값 | |
| y | 0 | number | counter의 Y 축 위치, default로 그려진 위치를 기준으로 상, 하 위치 값 | ||
| width | 'auto' | number | counter의 가로 넓이, 픽셀단위 (pixel) ( ※ 'auto' - 화면 크기에 맞추어 자동 설정 ) | ||
| height | 'auto' | number | counter의 세로 높이, 픽셀단위 (pixel) ( ※ 'auto' - 화면 크기에 맞추어 자동 설정 ) | ||
| radius | 2 | number | counter의 border-radius 조절 | ||
| color | '#fcfcfc' | string | counter영역의 배경 색상 | ||
| border | '#bdc2ca' | string | counter의 테두리 색상 | ||
| text | family | 'LCDMono' | string | counter 내의 텍스트 영역 글씨체 (font-family) | |
| size | 1 | number | counter 내의 텍스트의 크기, default로 그려진 크기의 비율에 근거하여 비례 (font-size) | ||
| weight | 800 | number || string | counter 내의 텍스트 영역 text두께 (font-weight) | ||
| color | '#484b4e' | string | counter 내의 텍스트 영역 text 색상 |
var styles = {
counter : {
x: -10 ,
y: 20 ,
width : 120,
height : 60,
radius : 2,
color : '#fcfcfc',
border : '#bdc2ca',
text : {
family : 'Gulim',
size : 1,
weight : 'bold',
color:'#484b4e'
}
}
}
눈금 및 치수와 관련된 스타일 설정
| default | type | 설명 | |||
|---|---|---|---|---|---|
| axis | block | 10 | number | 눈금 수 | |
| interval | 4 | number | 눈금 간격 | ||
| text | num | 5 | number | 축의 치수를 나타내는 텍스트 영역의 수 | |
| family | 'LCDMono' | string | 축의 치수를 나타내는 텍스트의 글씨체 (font-family) | ||
| size | 12 | number | 축의 치수를 나타내는 텍스트의 글씨 크기(font-size) | ||
| weight | "bold" | number || string | 축의 치수를 나타내는 텍스트의 글씨 두께 (font-weight) | ||
| align | "end" | string | 축의 치수를 나타내는 텍스트의 글씨의 정렬 (text-aligin) | ||
| color | '#797f85' | string | 축의 치수를 나타내는 텍스트의 글씨 색상 | ||
| blockLine | color | '#a3aab1' | string | 축의 치수를 가르키는 눈금의 색상 | |
| length | 15 | number | 축의 치수를 가르키는 눈금의 길이 | ||
| intervalLine | color | '#c3c8cd' | string | 축의 눈금의 색상 | |
| length | 7.5 | number | 축의 눈금의 길이 |
var styles = {
axis : {
block : 10 ,
interval : 4 ,
text : {
num : 5,
family: 'gulim',
size: 12,
weight: 800,
align: "end",
color : "#797f85"
},
blockLine: {
color: "#a3aab1",
length : 15
},
intervalLine: {
color: "#c3c8cd",
length: 7.5
}
},
}
cylinder와 관련된 스타일 설정
| default | type | 설명 | |||
|---|---|---|---|---|---|
| cylinder | border | color | '#fcfcfc' | string | 이전 값 > 현재값 일때, 보이는 배경색상 |
| fill | border | 'none' | string | 이전 값 > 현재값 일때, 보이는 테두리 | |
| size | 1 | number | 이전 데이터 값을 나타내는 잔상의 두께 | ||
| color | '#ff6360' | string | 이전 데이터 값을 나타내는 잔상의 색상 | ||
| current | opacity | 0.5 | string | 이전 데이터 값을 나타내는 잔상의 투명도 | |
| prevDataLine | color | '#ff6360' | string | cylinder 밑부분에 색상 (원모양) |
var styles = {
cylinder: {
border :'#c7cfd9',
fill : {
color : "100-#2bcdba-#6bdccf",
opacity: 0.3,
border : 'none'
},
current : {
color : '#6bdccf'
},
prevDataLine : {
color : '#c7cfd9'
}
}
}
cylinder 의 최대값, 평균값, 타겟값 styles
options.use.max == true 인 경우, max값 styles
| default | type | 설명 | ||||
|---|---|---|---|---|---|---|
| pointer | max | bar | color | '#ff625f' | string | max값을 나타내는 선의 색상 |
| length | 10 | number | max값을 나타내는 선의 길이 | |||
| font | size | 10 | number | max 글씨의 크기 | ||
| color | '#ff625f' | string | max 글씨의 색상 | |||
| align | 'start' | string | max 글씨의 정렬 | |||
| family | 'Nanum Gothic' | string | 최대값의 글씨 타입 |
options.use.avg== true 인 경우, 평균값 styles
| default | type | 설명 | ||||
|---|---|---|---|---|---|---|
| pointer | avg | bar | color | '#2bcdba' | string | 평균값을 나타내는 선의 색상 |
| length | 10 | number | 평균값을 나타내는 선의 길이 | |||
| font | size | 10 | number | 평균값의 글씨 크기 | ||
| color | '#2bcdba' | string | 평균값의 글씨 색상 | |||
| align | 'start' | string | 평균값의 글씨 정렬 | |||
| family | 'Nanum Gothic' | string | 평균값의 글씨 타입 |
target값 styles ( ※ options.use.target을 true 설정한 경우에만 사용이 가능합니다. )
| default | type | 설명 | |||
|---|---|---|---|---|---|
| pointer | target | color | '#8394a6' | string | target값을 표시하는 마크의 색상 |
var styles = {
pointer: {
max: {
bar : {
color : '#ff625f',
length : 10
},
font : {
size : 10,
color : '#ff625f',
align : 'start' ,
family : 'Gulim'
}
},
avg: {
bar : {
color : '#2bcdba',
length : 10
},
font : {
size : 10,
color : '#2bcdba',
align : 'start' ,
family : 'Gulim'
}
},
target: {
color : '#8394a6'
}
}
}