var styles = {    
	series: {
        		s1: {
			area: {
				normal: {
					color: [ [0, '#2bcdba'], [100, '#6bdccf'] ],
					over: { color: {src: '../webponent/chart/sample_svg/chart/img/over.png', color: '#4e6679'} }
				}
			},
			line: {
				normal: {
					width: 0,
					over: { width: 0 }
				}
			},
			gradient: {
				direction: 'vertical'
			},
			text: {
				use: false, color: '#666666', family: 'Nanum Gothic', size: 12,
				format: 'priceDataFormat'
			}
		},
		s2: {
			area: {
				normal: {
					color: [ [0, '#ff625f'], [100, '#ff918f'] ],
					over: { color: {src: '../webponent/chart/sample_svg/chart/img/over.png', color: '#4e6679'} }
				}
			},
			line: {
				normal: {
					width: 0,
					over: { width: 0 }
				}
			},
			gradient: {
				direction: 'vertical'
			},
			text: {
				use: false, color: '#666666', family: 'Nanum Gothic', size: 12,
				format: 'priceDataFormat'
			}
		},
		s3: {
			area: {
				normal: {
					color: [ [0, '#feb401'], [100, '#fecb4e'] ],
					over: { color: {src: '../webponent/chart/sample_svg/chart/img/over.png', color: '#4e6679'} }
				}
			},
			line: {
				normal: {
					width: 0,
					over: { width: 0 }
				}
			},
			gradient: {
				direction: 'vertical'
			},
			text: {
				use: false, color: '#666666', family: 'Nanum Gothic', size: 12,
				format: 'priceDataFormat'
			}
		},
		s4: {
			area: {
				normal: {
					color: [ [0, '#0093d8'], [100, '#4db4e4'] ],
					over: { color: {src: '../webponent/chart/sample_svg/chart/img/over.png', color: '#4e6679'} }
				}
			},
			line: {
				normal: {
					width: 0,
					over: { width: 0 }
				}
			},
			gradient: {
				direction: 'vertical'
			},
			text: {
				use: false, color: '#666666', family: 'Nanum Gothic', size: 12,
				format: 'priceDataFormat'
			}
		},
		s5: {
			area: {
				normal: {
					color: [ [0, '#745cd4'], [100, '#9e8de1'] ],
					over: { color: {src: '../webponent/chart/sample_svg/chart/img/over.png', color: '#4e6679'} }
				}
			},
			line: {
				normal: {
					width: 0,
					over: { width: 0 }
				}
			},
			gradient: {
				direction: 'vertical'
			},
			text: {
				use: false, color: '#666666', family: 'Nanum Gothic', size: 12,
				format: 'priceDataFormat'
			}
		}
    }
}
var series = {
    main: {
        s1: { series: 'column', form: 'stack', xaxis: 'date', yaxis: 'price1' },
        s2: { series: 'column', form: 'stack', xaxis: 'date', yaxis: 'price2' },
        s3: { series: 'column', form: 'stack', xaxis: 'date', yaxis: 'price3', yaxisid: 's3' },
        s4: { series: 'column', form: 'stack', xaxis: 'date', yaxis: 'price4', yaxisid: 's3' },
        s5: { series: 'column', form: 'stack', xaxis: 'date', yaxis: 'price5', yaxisid: 's5' }
    }
}

Demo

STACK

form : 'updown_stack'

상, 하로 나뉘지만 같은 위치에서 갈라지는 형태

• 어떤 Series 위로 붙을 것인지 yaxisid에 기준이 되는 Series의 key값을 적어준다.
• yaxisid가 정의되어 있지 않다면 제일 첫번째 series가 기준이 된다.
• Series가 보여지는 순서대로 정의

form : 'bullet'

stack은 자신의 앞 Series에 더해진 값이 그려진 것이라면 bullet은 앞 Series에 상관없이 최저값을 기준으로 그려진다.

Usage

var styles = {
	series: {
		s1: {
			area: {
				normal: {
					color: [ [0, '#2bcdba'], [100, '#6bdccf'] ],
					over: { color: {src: '../webponent/chart/sample_svg/chart/img/over.png', color: '#4e6679'} }
				}
			},
			line: {
				normal: {
					width: 0,
					over: { width: 0 }
				}
			},
			gradient: {
				direction: 'vertical'
			}
		},
		s2: {
        	itemWidth: 50,
			area: {
				normal: {
					color: [ [0, '#ff625f'], [100, '#ff918f'] ],
					over: { color: {src: '../webponent/chart/sample_svg/chart/img/over.png', color: '#4e6679'} }
				}
			},
			line: {
				normal: {
					width: 0,
					over: { width: 0 }
				}
			},
            gradient: {
				direction: 'vertical'
			}
		}
    }
}
var series = {
	main: {
		s1: { series: 'bar', form: 'bullet', xaxis: 'date', yaxis: 'price1' },
		s2: { series: 'bar', form: 'bullet', xaxis: 'date', yaxis: 'price2' }
	}
}

var options = {
	data: {
		data: [
			{"xdata": "2010", "cost1": "210", "cost2": "230"},
			{"xdata": "2011", "cost1": "200", "cost2": "130"},
			{"xdata": "2012", "cost1": "210", "cost2": "250"},
			{"xdata": "2013", "cost1": "220", "cost2": "190"},
			{"xdata": "2014", "cost1": "210", "cost2": "200"}
		]
	}
}
var styles = {
	series: {
		s1: {
			area: {
				up: {
					color: [ [0, '#fe5855'], [100, '#fe8a88'] ],
					over: { color: [ [0, '#ca2c29'], [100, '#d55552'] ] }
				},
				down: {
					color: [ [0, '#4db4e4'], [100, '#0093d8'] ],
					over: { color: [ [0, '#337fb9'], [100, '#0260a9'] ] }
				},
				flat: {
					color: [ [0, '#6a8091'], [100, '#8899a7'] ],
					over: { color: [ [0, '#4f677a'], [100, '#718594'] ] }
				}
			},
			line: {
				up: {
					width: 0,
					over: { width: 0 }
				},
				down: {
					width: 0,
					over: { width: 0 }
				}
			},
			gradient: {
				direction: 'vertical'
			}
		}
    }
}
var series = {
	main: {
		s1: { series: 'bar', form: 'updown_minaxis', xaxis: 'xdata', yaxis: 'cost1', minaxis: 'cost2' }
	}
}
var chart = webponent.chart.init($('.chart02'), options, styles, series);

var styles = {
	series: {
		s1: {
			text: {
				use: true,
				family: 'gulim',
				size: 12,
				color: '#ddd',
				align: 'left',
				style: 'bold',
				opacity: 0.5,
				// format만 쓰거나
				format: function(value){
					return value+'원';
				}
				// func만 쓰거나 
				func: function(data){
					var shape = data.shape;
					return {
						x: shape.x + (shape.width / 2),
						y: shape.y + 10,
						text: String(value.yaxis).format() + '원'
					};
				}
			}
		}
	}
}

var styles = {
	series: {
		s1: {
			accessibility: {
				use: true,
				style: 'triangle'
			}
		}
	}
}

var styles = {
	series: {
		s1: {
			itemRenderer: {
				setRenderer: function(canvas, shape, data, styles){
					// x, y, radius
					var item = canvas.rect(shape.left, shape.top,  shape.width, shape.height);
					item.attr({
						fill: '90-#2bcdba:0-#6bdccf:100-100', stroke: ''
					});
					return item;
				}
			}
		}
	}
}