var defaultStyles = {
	layout : {
		position : {
			x : 0,
			y : 0
		},
		area : {
			color : '#f8f8f8',
			border :'#c1c6cc'
		}
	},
	object : {
		radius : 128
	},
	counter : {
		x : 0 ,
		y : 0 ,
		width : 80,
		height : 40,
		radius : 2,
		text : {
			family : 'LCDMono',
			weight : 800,
			color:'#484b4e',
			size : 1
		},
		angular : {
			border : 'none',
			color : 'none'
		},
		multi : {
			divider: true,
			dividerThick : 1,
            counterInterval: 0,
			counterBorder: '#acafb3',
			textSize: 1
		}
	},
	axis : {
		block : 10 ,
		interval : 4 ,
		text : {
			num : 5,
			family: defaultFont,
			size: 10,
			weight: "bold",
			align: "end",
			color : "#797f85",
			angular : {
				color : '#848789',
				size : 12,
				weight:300
			}
		},
		angularBar : {
			start : 5,
			end_block : 22,
			end_interval : 12,
			color : '#8c949f'
		},
		dual : {
			angle :250,
			block: 22,
			interval : 2,
			text : 8,
			textSize : 10 ,
			maxAxis: 250 ,
			minAxis: 0
		}
	},
	angular : {
		angle : 270,
		center : {
			color:  '#8397a6',
			border :  '#8397a6'
		},
		base:{
			color: "50-#f2f2f2-#fff-#f2f6f6",
			border: '#6a6e72',
			lineSize: 10
		},
		normal : {
			color : "#484b4e",
			border : 'none'
		},
		multi : {
			color : "#484b4e",
			border : 'none'
		},
		dual : {
			color : "#484b4e",
			border : 'none'
		}
	},
	pointer: {
		max : {
			bar : {
				color : '#ff625f'
			},
			font : {
				size : 10,
				position : -18,
                family: 'defaultFont'
			},
			angular :{
				color:'#ff625f',
				length: -5
			}
		},
		avg : {
			bar : {
				color : '#2bcdba'
			},
			font : {
				size : 10,
				position : -18,
                family: 'defaultFont'
			},
			angular : {
				color:'#2bcdba',
				length: 10
			}
		},
		target : {
			color : '#8397a6',
			border : 'none'
		}
	}
};

Configuration Styles

layout

SVG 전체 영역 스타일 및 Linear Gauge의 위치 조정

Parameters

Usage

var styles = {
	layout: {
		position: {
			x : 50,
			y : 50	
		},
		area : {
			color : '#f8f8f8',
			border : '#c1c6cc'
		}
	}
}

var styles = {
	object: {
		radius : 128
	}
}

var styles = {
	counter : {
		x: -10 ,
		y: 20 ,
		width : 120,
		height : 60,
		r: 2
	}
}

var styles = {
	counter : {
		text : {
			family : 'Gulim',
			weight : 'bold',
			color:'#484b4e',
				size : 1
		}
	}
}

var styles = {
	counter : {
		angular: {
			fontsize : 14,
			sizeup : true,
			border : 'none',
			color : 'none'
		}
	}
}

var styles = {
	counter : {
		multi: {
			divider: true , 
			dividerThick : 1,
			counterInterval: 3 ,	
			counterBorder: '#acafb3',
			textSize: 1.2
		}
	}
}

var styles = {
		axis : {
			block : 10 ,
				interval : 4 
		}
}

var styles = {
	axis : {
		text : {
			num : 5,
			family: 'gulim',
			angular : {
				color : '#797f85'
				size: 12,
				weight: 800
			}
		}	
	}
}

var styles = {
		axis : {

		angularBar : {
					start : 5,
					end_block : 22,
					end_interval : 12,
					color : '#8c949f'
		}
	}
}

var styles = {
		axis: {
				dual : {
					angle :250,
					block: 22,
					interval : 2,
					text : 8,
					textSize : 10,
					maxAxis : 250,
					minAxis : 0
				}
		}
}

var styles = {
		angular : {
				angle : 270,
				center : {
						color:  '#8397a6',
						border :  '#8397a6'
				},
				base:{
						color: "50-#f2f2f2-#fff-#f2f6f6",
						border: '#6a6e72',
						lineSize: 10
				},
				normal : {
						color : "#484b4e",
						border : 'none'
				},
				multi : {
						color : "#484b4e",
						border : 'none'
				},
				dual : {
						color : "#484b4e",
						border : 'none'
				}
		},
}

var styles = {
	pointer: {
		max : {
			bar : {
				color : '#ff625f'
			},
			font : {
				size : 10,
				position : -18,
				family : 'Gulim'
			},
			angular :{
				color:'#ff625f',
				length: 10
			}
		},
		avg : {
			bar : {
				color : '#2bcdba',
			},
			font : {
				size : 10,
				position : -18,
				family : 'Gulim'
			},
			angular :{
				color:'#2bcdba',
				length: 10
			}
		},
		target : {
			color : '#8397a6'
		}
	}
}