Coloring

3
Overview

Chart Series 중 Area Series (면 시리즈)의 샘플 및 설정.

AreaSeriesMidnighttruejs
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>CHART01</title>
	<script type="text/javascript" src="../../../lib/comm/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../../../lib/comm/raphael.js"></script>
	<script type="text/javascript" src="../../../lib/comm/webponent.comm.common.js"></script>
	<script type="text/javascript" src="../../../lib/chart/webponent.chart.js"></script>
	<style type="text/css">
		.chart01 {width: 100%; height: 400px; border: 1px solid #eee;}
	</style>
	<script type="text/javascript">
	window.onload = function(){
		var options = {
			data: {
				data: [
					{ Date: '20140101', Mprc: 10000 },
					{ Date: '20140102', Mprc: 20000 },
					{ Date: '20140103', Mprc: 15000 },
					{ Date: '20140104', Mprc: 30000 },
					{ Date: '20140105', Mprc: 5000 }
				]
			},
			format: {
				xAxis: function(_str){
					return _str.substr(0, 4)+'/'+_str.substr(4,2)+'/'+_str.substr(6,2);
				}
			},
			use: {
				animate: true,
				aCrossLine: true
			}
		}
		var styles = {
			main: {
				graph: {
					color: '#fafafa'
				},
				yAxis: {
					text: {
						align: 'right'
					}
				},
				series: {
					s1: {
						area: {
							normal: {
								color: '#2bcdba', opacity: 0.4,
								over: {
									color: '#2bcdba', opacity: 0.4
								}
							}
						},
						line: {
							normal: {
								color: '#2bcdba', width: 3,
								over: {
									color: '#2bcdba', width: 3
								}
							}
						}
					}
				}
			}
		};
		var series = {
			"main": {
				"s1": {series: 'area', xaxis: 'Date', yaxis: 'Mprc'}
			}
		};
		var chart = webponent.chart.init($('.chart01'), options, styles, series);
	};
	</script>
</head>
<body>
	<div class="chart01"></div>
</body>
</html>

Demo

DEFAULT

Configuration Styles

Default StylesMidnighttruejs
// 면
color: '영문 색상 명 RGB값, 그라데이션 포맷, 패턴이미지 포맷',
opacity: '0 ~ 1',
over: { // 마우스 오버시에 변경되는 면 스타일
	color: '영문 색상 명 RGB값, 그라데이션 포맷, 패턴이미지 포맷',
	opacity: 0 ~ 1
}
// 선
color: '영문 색상 명 RGB값',
width: 0 ~ ...,
opacity: 0 ~ 1',
over: { // 마우스 오버시에 변경되는 선 스타일
	color: '영문 색상 명 RGB값',
	width: 0 ~ ...,
	opacity: 0 ~ 1
}

면 색상 변경

Normal Coloring

단색

  • area.normal.color = '영문 색상명 혹은 RGB값'; //단색-일반 형태
  • area.up.color = '영문 색상명 혹은 RGB값'; // 상승

  • area.down.color = '영문 색상명 혹은 RGB값'; // 하락
  • area.flat.color = '영문 색상명 혹은 RGB값'; // 보합(상하 변동이 없는 동일한 값일 경우)
  • Mouse Over 일때
    • area.normal.over.color = '영문 색상명 혹은 RGB값'; //단색-일반 형태
    • area.up.over.color = '영문 색상명 혹은 RGB값'; // 상승

    • area.down.over.color = '영문 색상명 혹은 RGB값'; // 하락
    • area.flat.over.color = '영문 색상명 혹은 RGB값'; // 보합(상하 변동이 없는 동일한 값일 경우)

Parameters

colorstring영문 색상명 혹은 RGB값

Gradient Coloring

그라데이션 형태

  • area.normal.color = [ [ 0 ~ 100, 'English color name or RGB value' ], [ 0 ~ 100, 'English color name or RGB value' ] ]; // 일반
  • area.up.color =  [ [ 0 ~ 100, 'English color name or RGB value' ], [ 0 ~ 100, 'English color name or RGB value' ] ]; // 상승

  • area.down.color =  [ [ 0 ~ 100, 'English color name or RGB value' ], [ 0 ~ 100, 'English color name or RGB value' ] ];; // 하락
  • area.flat.color = [ [ 0 ~ 100, 'English color name or RGB value' ], [ 0 ~ 100, 'English color name or RGB value' ] ];  // 보합(상하 변동이 없는 동일한 값일 경우)
  • Mouse Over 일때
    • area.normal.over.color = [ [ 0 ~ 100, 'English color name or RGB value' ], [ 0 ~ 100, 'English color name or RGB value' ] ]; // 일반
    • area.up.over.color =  [ [ 0 ~ 100, 'English color name or RGB value' ], [ 0 ~ 100, 'English color name or RGB value' ] ]; // 상승

    • area.down.over.color =  [ [ 0 ~ 100, 'English color name or RGB value' ], [ 0 ~ 100, 'English color name or RGB value' ] ];; // 하락
    • area.flat.over.color = [ [ 0 ~ 100, 'English color name or RGB value' ], [ 0 ~ 100, 'English color name or RGB value' ] ];  // 보합(상하 변동이 없는 동일한 값일 경우)
  • 배열 형식으로 정의 되며 0번 index의 0~100 사이의 값보다 1번 index의 0~100 사이의 값이 더 커야 한다.

  • 그라데이션 위치 및 값 지정방법 위의 이미지를 참조
  • Vertical의 경우 100 ~ 0으로 반대로 입혀지지만 설정값 입력시에는 0 ~ 100 의 순서로 입력해주어야 한다.
    horizontal : [[0, 'white'], [100, 'black']]
    vertical : [[0, 'black'], [100, 'white']]  

Parameters

colorarray그라데이션 배열 형식

Pattern Coloring

Background Image 사용

color 안에 color를 또 지정하는 이유 : 아이템의 width가 5픽셀 이하일때는 패턴이미지가 보이지 않는 경우가 대다수이다.

그래서 아이템의 넓이가 5픽셀 이하일 때는 속도개선 차원에서 이미지대신 단색으로 처리되도록 하기 위함이다.

  • area.normal.color = {src : 'image URL', color: '영문 색상명 혹은 RGB값' } ; // 일반
  • area.up.color = {src : 'image URL', color: '영문 색상명 혹은 RGB값' } ; // 상승

  • area.down.color = {src : 'image URL', color: '영문 색상명 혹은 RGB값' } ; // 하락
  • area.flat.color = {src : 'image URL', color: '영문 색상명 혹은 RGB값' } ; // 보합(상하 변동이 없는 동일한 값일 경우)
  • Mouse Over 일때
    • area.normal.over.color = {src : 'image URL', color: '영문 색상명 혹은 RGB값' } ; // 일반
    • area.up.over.color = {src : 'image URL', color: '영문 색상명 혹은 RGB값' } ; // 상승

    • area.down.over.color = {src : 'image URL', color: '영문 색상명 혹은 RGB값' } ; // 하락
    • area.flat.over.color = {src : 'image URL', color: '영문 색상명 혹은 RGB값' } ; // 보합(상하 변동이 없는 동일한 값일 경우)

Parameters

srcstring(url)이미지 주소, 파일명 + 확장자까지
colorstring영문 색상명 혹은 RGB값

Opacity Coloring

면의 투명도 0 ~ 1

gradient, pattern을 사용할경우에는 투명도 반영 안됨.

  • area.normal.opacity = 0 ~ 1; // 일반
  • area.up.opacity = 0 ~ 1; // 상승

  • area.down.opacity = 0 ~ 1; // 하락
  • area.flat.opacity = 0 ~ 1; // 보합(상하 변동이 없는 동일한 값일 경우)
  • Mouse Over 일때
    • area.normal.over.opacity = 0 ~ 1; // 일반
    • area.up.over.opacity = 0 ~ 1; // 상승

    • area.down.over.opacity = 0 ~ 1; // 하락
    • area.flat.over.opacity = 0 ~ 1; // 보합(상하 변동이 없는 동일한 값일 경우)

Parameters

opacitynumber투명도(default는 1, 0 ~ 1의 사이값 입력)

Usage

areaMidnighttruejs
var styles = {
	series: {
		s1: {
			area: {		// 면 Style
				up: {		// Pattern
					color: {src: '../img/column_pattern03.gif', color: '#6453aa'}, 		
					over: { color: '#e01f1b' }
				},
				down: {		// Gradient
					color: [ [0, '#51ccff'], [50, '#005072'], [100, '#51ccff'] ], 		
					over: { color: '#e01f1b' }
				}
			}
		}
	}
}

Demo

DEMO 01DEMO 02

선 스타일 변경

Color

선의 색상(면의 단색 정의 방법과 동일함)

  • line.normal.color = '영문 색상명 혹은 RGB값'; //단색-일반 형태
  • line.up.color = '영문 색상명 혹은 RGB값'; // 상승

  • line.down.color = '영문 색상명 혹은 RGB값'; // 하락
  • line.flat.color = '영문 색상명 혹은 RGB값'; // 보합(상하 변동이 없는 동일한 값일 경우)
  • Mouse Over 일때
    • line.normal.over.color = '영문 색상명 혹은 RGB값'; //단색-일반 형태
    • line.up.over.color = '영문 색상명 혹은 RGB값'; // 상승

    • line.down.over.color = '영문 색상명 혹은 RGB값'; // 하락
    • line.flat.over.color = '영문 색상명 혹은 RGB값'; // 보합(상하 변동이 없는 동일한 값일 경우)

Parameters

colorstring영문 색상명 혹은 RGB값

Width

선의 두께 ( default 는 1 이며, 0이면 선을 그리지 않는다.)

  • line.normal.width = 0 ~ ...; // 일반
  • line.up.width =  0 ~ ...; // 상승

  • line.down.width =  0 ~ ...; // 하락
  • line.flat.width =  0 ~ ...; // 보합(상하 변동이 없는 동일한 값일 경우)
  • Mouse Over 일때
    • line.normal.over.width = 0 ~ ...; // 일반
    • line.up.over.width = 0 ~ ...; // 상승

    • line.down.over.width = 0 ~ ...; // 하락
    • line.flat.over.width = 0 ~ ...; // 보합(상하 변동이 없는 동일한 값일 경우)

Parameters

colorstring영문 색상명 혹은 RGB값

Opacity

선의 투명도 ( default 는 1 )

  • line.normal.opacity = 0 ~ 1; // 일반
  • line.up.opacity = 0 ~ 1; // 상승

  • line.down.opacity = 0 ~ 1; // 하락
  • line.flat.opacity = 0 ~ 1; // 보합(상하 변동이 없는 동일한 값일 경우)
  • Mouse Over 일때
    • line.normal.over.opacity = 0 ~ 1; // 일반
    • line.up.over.opacity = 0 ~ 1; // 상승

    • line.down.over.opacity = 0 ~ 1; // 하락
    • line.flat.over.opacity = 0 ~ 1; // 보합(상하 변동이 없는 동일한 값일 경우)

Parameters

opacitynumber투명도(default는 1, 0 ~ 1의 사이값 입력)

Usage

areaMidnighttruejs
var styles = {
	series: {
		s1: {
			line: {
				normal: {
	             color: 'blue', width: 2, opacity: 0.5,
					over: {
	              		color: 'blue', width: 2, opacity: 1
					}
				}
			}
		}
	}
}

Demo

선 스타일