var options = {
	data: {
		data: [
			{ Date: '20140101', Mprc: 10000, Cprc: 30000 },
			{ Date: '20140102', Mprc: 20000, Cprc: 30000 },
			{ Date: '20140103', Mprc: 15000, Cprc: 31000 },
			{ Date: '20140104', Mprc: 30000, Cprc: 30300 },
			{ Date: '20140105', Mprc: 5000, Cprc: 20000 }
		]
	},
	format: {
		xAxis: function(_str){
			return _str.substr(0, 4)+'.'+_str.substr(4,2)+'.'+_str.substr(6,2);
		},
		yAxis: 'priceDataFormat'
	},
	func: {
		tip: function(tipElement, data, rect){
			var date = data.xaxis.substr(0, 4)+'.'+data.xaxis.substr(4, 2)+'.'+data.xaxis.substr(6, 2);
			var tip = '<div class="text">'+date + ' / ' + String(data.yaxis).format().trim()+'</div>';
			tipElement.html(tip).show();
			var arrow = '<div class="arrow" style="width: '+tipElement.width() + 'px;"></div>';
			tipElement.html(tipElement.html() + arrow).css({
				left: rect.x - (tipElement.width() / 2), top: rect.y - 35
			});
		}
	},
	use: {
		animate: true,
		aCrossLine: true,
		multiYAxis: true
	}
};
var styles = {
	main: {
		layout: {
			paddingTop: 57, color: '#f8f8f8',
			line: {color: '#eaeaea', width: 1}
		},
		graph: {
			color: '#f8f8f8',
			line: {
				top: {color: '#cccccc'},
				left: {width: 0},
				right: {width: 0},
				bottom: {color: '#cccccc'}
			}
		},
		crossLine: {
			color: '#465866'
		},
		xAxis: {
			paddingTop: 13, height: 30,
			text: {family: 'Nanum Gothic', size: 12, color: '#666'},
			line: {color: '#e3e3e3', width: 1}
		},
		yAxis: {
			line: {color: '#cccccc', width: 1, opacity: 1}
		},
		tip: {
			className: 'tip'
		},
		series: {
			s1: {
				yAxis: {
					position: 'left',
					text: {family: 'Nanum Gothic', size: 12, color: '#666', align: 'right'}
				},
				area: {
					normal: {
						color: [ [0, '#2bcdba'], [100, '#6bdccf'] ],
						over: { color: [ [0, '#028c8e'], [100, '#33a2a4'] ] }
					}
				},
				line: {
					normal: {
						width: 0,
						over: { width: 0 }
					}
				},
				gradient: {
					direction: 'vertical'
				}
			},
			s2: {
				yAxis: {
					position: 'right',
					text: {family: 'Nanum Gothic', size: 12, color: '#666', align: 'left'}
				},
				area: {
					normal: {
						color: [ [0, '#feb401'], [100, '#fecb4e'] ],
						over: { color: [ [0, '#f28402'], [100, '#f59c33'] ] }
					}
				},
				line: {
					normal: {
						width: 0,
						over: { width: 0 }
					}
				},
				gradient: {
					direction: 'vertical'
				}
			}
		}
	}
};
var series = {
	"main": {
		"s1": {series: 'column', xaxis: 'Date', yaxis: 'Mprc'},
		"s2": {series: 'column', xaxis: 'Date', yaxis: 'Cprc'}
	}
};
var chart = webponent.chart.init($('.chart01'), options, styles, series);

 Demo

Example

멀티축 설정시 주의사항

options setting

옵션 설정 중 use.multiYAxis = true;로  변경해주어야 한다.

styles setting

멀티 Y축의 기준이 되는 SERIES 들이 있는데 그 Style SERIES 안에 yAxis: {...} 를 설정한다.

Parameters 

series setting

멀티 Y축의 기준이 되는 SERIES 들이 있는데 그 SERIES에 yaxisid = '기준이 되는 Series KEY 명' 을 입력한다.

• 왼쪽이나 오른쪽 중 Y축을 기준삼는 시리즈가 하나씩이면 yaxisid 는 정의해 주지 않아도 된다.
• yaxisid는 한쪽 Y축을 기준으로 잡는 시리즈가 두개 이상일 경우에만 필히 지정해 주어야 한다.

var options = {
	use: {
		multiYAxis: true
	}
};
var styles = {
	main: {
		series: {
			s1: {
				yAxis: {
					position: 'left'
				}
			},
			s2: {
				yAxis: {
					position: 'right'
				}
			},
			s3: {
 
			}
		}
	}
};
var series = {
	main: {
		s1: { series: 'line', xaxis: 'x축 데이터 key', yaxis: 'y축 데이터 key', yaxisid: 's1' }, // 기준이 되는 series 하나만 사용 될 경우 yaxisid는 적지 않아도 된다. 
		s2: { series: 'line', xaxis: 'x축 데이터 key', yaxis: 'y축 데이터 key', yaxisid: 's2' }, 
		s3: { series: 'line', xaxis: 'x축 데이터 key', yaxis: 'y축 데이터 key', yaxisid: 's2' }  // 기준이 되는 series의 key 명을 입력한다.
	}
};