angular gauge - options

3Overview


Angular gauge(?????) ? ???? ??? ?? ?? ?? ?? ??? ???, ???? ????, Tool Tip, ?? ??? ?? ????.

options listMidnighttruejs
var defaultOptions = {
	data : {
		data : null,
		url: null,
		type: null,
		reverse: false,
		jsonDepth: 'output.result',
		format: null,
		use : null,
		dataLen : null
	},
	use :{
			axis: true,		
			axisText : true,		
			counter : true,		
			max :'auto',			
			avg : 'auto',			
			target : false,			
			toolTip: true,			
			animate: true,
			animateText: true,			
			resize: false,			
			responsive: false ,		
 	},
 
	toolTip : {
		className : null,         	
		position : {
			x : 0,
			y : 0
		},            
		func : null
	},
 
	minmax : {
		min : 'auto',
		max : 'auto'	
	},
 
	pointer:{
		max: 'auto'	
		avg : 'auto'	
		target : 0		
	},
}

Configuration Options

data

data.data

URL? ?? JSON ???? ?? ??? ??? ??

Parameters

datasarrayJSON DATA? ??? ??

Usage

data.dataMidnighttruejs
var options = {
	data: {
		data: [ 
			{date: 20120101, price: 10000, legend: 'A'},
			{date: 20120101, price: 20000, legend: 'B'},
			{date: 20120101, price: 30000, legend: 'C'},
			{date: 20120101, price: 40000, legend: 'D'}
		]
	}
}

data.url

Angular gauge(?????) ? ??? ??? ??

Parameters

valuestring??? ??(AJAX? ??)

Usage

data.urlMidnighttruejs
var options = {
	data: {
		url: 'http://www.cyber-i.com/'
	}
}

data.type

Angular gauge(?????) ? ??? ??? ??

Parameters

valuestring??? ?? ["json", "text"]

Usage

data.typeMidnighttruejs
var options = {
	data: {
		type: 'json'
	}
}

data.reverse

Parameters

valueboolean???? ??? ????? ?? ?????? ??? ?? ?? [false, true]

Usage

data.reverseMidnighttruejs
var options = {
	data: {
		reverse: false
	}
}

data.jsonDepth

json ???? ??? ?? ?? 

Parameters

valuestring?? ???? ?? ??? '.' ? ??

Usage

data.jsonDepthMidnighttruejs
var options = {
	data: {
		jsonDepth: 'output.result'
	}
}
data.jsonDepth - DATAMidnighttruejs
// DATA RESULT
{
	output: {
		result: [
			{date: 20120101, price: 10000, legend: 'A'},
			{date: 20120101, price: 20000, legend: 'B'},
			{date: 20120101, price: 30000, legend: 'C'},
			{date: 20120101, price: 40000, legend: 'D'}
		]
	}
}

data.format

data ? format ??? ??????.

format ??? "prime" , "percent" , "temperature"  

  • prime = ??? ???
  • percent = ????? "%"
  • temperature = º ?? ??

Parameters

valuestringdefault? null??? ?????? ????? ?????.

Usage

data.typeMidnighttruejs
var options = {
	data: {
		format: null
	}
}


data.use

??? ???? ?? ?? ( Angular gauge ? ?? ????? ?? )

Parameters

valueArrayAngular gauge ? ?? ??? ??? ??? ???? ?


Usage

data.useMidnighttruejs
var options = {
	data: {
		use: ['price']
	}
}

data.dataLen

???? ???? ?? ??? ??

(*??? ??? ??? ??? ?? ??? ???? ??)

Parameters

valueIntAngular gauge ? ??? ???? ??? ???? ?

Usage

data.useMidnighttruejs
var options = {
	data: {
		dataLen: 100
	}
}

use

use.axis

Parameters

valuebooleanAngular gauge(?????) ? ?? ?? ??

Usage

legend.formatMidnighttruejs
var options = {
	use: {
		axis : true
	}
}

use.axisText

Parameters

valuebooleanAngular gauge(?????)? ?? ?? ??

Usage

legend.formatMidnighttruejs
var options = {
	use: {
		axisText: true
	}
}

use.counter

Parameters

valuebooleanAngular gauge(?????) ? ??? ???? ??? ????

Usage

legend.formatMidnighttruejs
var options = {
	use: {
		counter: true
	}
}

use.max

??? ????? ??? ?? ??

*???? ??? ?? true ? pointer.max? ??? ??? ??,

**'auto'(default)? ??? ??? ?? ?? ??

Parameters

valuestring || boolean??? ????? ??? ?? ? ?? ??

Usage

legend.formatMidnighttruejs
// * ? ??
var options = {
	use: {
		max: true
	},
	pointer : {
		max: 120
	}
}

// ** ?? (??)
var options = {
	use: {
		max: 'auto'
	},
	pointer : {
		max: 'auto'
	}
}

use.avg

??? ????? ??? ?? ??

*???? ??? ?? true, pointer.avg? ?? ?? ??

**'auto'(default)? ??? ??? ?? ?? ??

Parameters

valuestring || boolean??? ????? ??? ?? ? ?? ??

Usage

legend.formatMidnighttruejs
// * ? ??
var options = {
	use: {
		avg: true
	},
	pointer : {
		avg: 50
	}
}
 
// ** ?? (??)
var options = {
	use: {
		avg: 'auto'
	},
	pointer : {
		avg: 'auto'
	}
}

use.target

Angular ?? ? ?? ??

Parameters

valuebooleanAngular gauge(?????) ?? ? ?? ??

Usage

legend.formatMidnighttruejs
var options = {
	use: {
		target: false
	}
}

use.toolTip

??? ?? ??

Parameters

valueboolean??? ?? ??

Usage

legend.formatMidnighttruejs
var options = {
	use: {
		toolTip: true
	}
}

use.animate

Angular ?? animate ?? ?? ??

Parameters

valuebooleanAngular gauge(?????) ?? animate ?? ?? ??

Usage

legend.formatMidnighttruejs
var options = {
	use: {
		animate: true
	}
}


use.animateText

Angular ?? ??? animate ?? ?? ??

Parameters

valuebooleanAngular gauge(?????) ?? ?????(???) ????? ?? ??


Usage

legend.formatMidnighttruejs
var options = {
	use: {
		animateText: true
	}
}

use.resize

Angular? ???? ????? ??

Parameters

valuebooleanAngular gauge(?????)? ???? ????? ??

Usage

legend.formatMidnighttruejs
var options = {
	use: {
		resize: false
	}
}

use.responsive

resize ????? ?? ??

Parameters

valueboolean

resize ????? ?? ??

  • Angular gauge(?????) ???? DIV ? width ?? 100% ? ?? ??? ?? ?? ??

Usage

legend.formatMidnighttruejs
var options = {
	use: {
		responsive: false
	}
}

 


toolTip


toolTip.className

??? class? ?? ?? CSS? ??? ? ??

Parameters

valuestring??? class? ??

Usage

toolTip.useMidnighttruejs
var options = {
	toolTip: {
		className: 'angular_tooltip'
	}
}

toolTip.position

??? X,Y ?? ??

Parameters

valueobject??? X,Y ?? ??

Usage 

toolTip.positionMidnighttruejs
var options = {
	toolTip: {
		position: {
			x : 20,
			y : 20	
		}
	}
}

toolTip.func

?? ?? function

Parameters

tipfunctionfunction

?? ??? ? css ? ??? ? ? ??.

data

object

??? ???? data

tipElementdom???? ???? DIV

Usage

toolTip.funcMidnighttruejs
var options = {
	toolTip: {
		func: function(pie, data, tipElement){
			tip.html( '?? : ' + data.date + '<br/>?? : ' + data.price );
			tip.css({color : 'gray'});
		}
	}
}

minmax

minmax.min

angular ?? ???? ?????.

Parameters

valueint

Angular gauge(?????)? ??? ???? ?? ('auto' ? ???? ??) 

Usage

resize.useMidnighttruejs
var options = {
	minmax: {
		min: -50
	}
}

minmax.max

angular ?? ???? ??

Parameters

valueint

Angular gauge(?????)? ??? ???? ?? ('auto' ? ???? ??) 

Usage

resize.useMidnighttruejs
var options = {
	minmax: {
		max: 100
	}
}

pointer


pointer.max

??? ????? ??? ??, int? ??? ??? ???? ??? max?? ??? ? ????. (default - 'auto')

( * options.use.max ? ?? true ? ???? ???? )

 

Parameters

valueint

??? ????? ??? ('auto' ? ???? ??) 

Usage

resize.useMidnighttruejs
var options = {
	pointer: {
		max: 'auto'
	}
}

pointer.avg

 

??? ????? ??? ??, int? ??? ??? ???? ??? ???? ??? ? ????. (default - 'auto')

( * options.use.avg? ?? true ? ???? ???? )

 

Parameters

valueint

??? ????? ??? ?? ('auto' ? ???? ??) 

Usage

resize.useMidnighttruejs
var options = {
	pointer: {
		avg: 'auto'
	}
}

pointer.target


???? ??? ???? ??.  (default - 0)

( * options.use.target? ?? true ? ???? ???? )

Parameters

valueint

???? ??? ???? ??

Usage

resize.useMidnighttruejs
var options = {
	pointer: {
		target: 0
	}
}