스타일 공통화 JS

OVERVIEW

차트를 적용하다보면 동일한 색상의 비슷한 디자인을 가지고 웹사이트 제작을 진행하는 경우가 많습니다.

매 페이지마다 스타일을 초기화 하는 것도 하나의 방법이지만, 좀 더 개발에 도움을 주기 위하여

스타일 공통화 JS 샘플이 추가되었습니다.

 

경로파일명설명
/chart/lib/chart/webponent.chart.style.js

sample의 HTML2 폴더가 추가되면서 생긴 스타일 공통화 JS 파일입니다.

이 파일은 사용자의 선택사항이며, 단지 스타일 공통화 시키는 방법을 가이드하기 위하여 만들어졌습니다.

필요하지 않다면 해당파일을 include 하지 않아도 됩니다.

/chart/sample/html2/디렉토리 HTML 파일 전부

스타일을 공통화 JS를 사용하고 있는 샘플파일 저장 디렉토리입니다.

{CONTEXT URL}/chart/sample/chart/layout2.html 으로 시작됩니다.

/chart/sample/html2/libwebponent.test.js

html2 디렉토리에 있는 html에 필요한 데이터와 테스트 동작에 필요한 이벤트들이 작성되어 있습니다.

html2 디렉토리 샘플에서만 필요한 파일입니다.

기본구성Midnighttruejs
var 기본구성 = {
	main: {
		basic: { // ... 스타일 정의 },
		black: { // ... 스타일 정의 },
		accessibility: { // ... 스타일 정의 }
	},
	sub: {
		basic: { // ... 스타일 정의 },
		black: { // ... 스타일 정의 },
		accessibility: { // ... 스타일 정의 }
	}
};

/sample/html2/ 내에 있는 .html 파일에 있는 테마 기본, 블랙, 접근성 별로 스타일을 구분지었습니다.

webponent.chart.style.js 를 사용하고자 한다면 테마를 추가하거나, 기존 테마를 수정하면 됩니다.

차트 초기화 시에 설정하는 series 보다 더 많은 스타일을 미리 정의해 놓을 수 있습니다.
series보다 정의해놓은 styles가 적을 경우에는 에러가 발생됩니다.

 

스타일 정의 예시

스타일 정의 예시Midnighttruejs
// 레이아웃 스타일
var layoutStyles = {
	main: {
		basic: {
			paddingTop: 20, paddingBottom: 0, paddingLeft: 0, paddingRight:20, color: '#f8f8f8', 
			line: {color: '#eaeaea', width: 1}
		},
		black: {
			paddingTop: 20, paddingBottom: 0, paddingLeft: 0, paddingRight:20, color: '#374553',
			line: {color: '#eaeaea', width: 1}
		},
		accessibility : {
			paddingTop: 20, paddingBottom: 0, paddingLeft: 0, paddingRight:20, color: '#fff',
			line: {color: '#eaeaea', width: 1}
		}
	}, 
	sub: {
		basic: {
			paddingTop: 0, color: '#f8f8f8', paddingLeft: 0, paddingRight:20,
			line: {color: '#eaeaea', width: 1}
		},
		black: {
			paddingTop: 0, color: '#f8f8f8', paddingLeft: 0, paddingRight:20,
			line: {color: '#eaeaea', width: 1}
		},
		accessibility : {
			paddingTop: 0, color: '#f8f8f8', paddingLeft: 0, paddingRight:20,
			line: {color: '#eaeaea', width: 1}
		}
	}
};
 
var BASIC = {
	main: {
		layout: layoutStyles.main.basic
	},
	sub: {
		layout: layoutStyles.sub.basic
	}
};

 

시리즈 스타일 정의 예시

스타일 정의 예시Midnighttruejs
var BASIC = {
	main: {
        series: {
        	base: { // 모든 시리즈에 적용할 공통적인 스타일을 정의한다.
        		area: {
					normal: { opacity: 0.4, over: { opacity: 0.4} }
				},
				line: {
					normal: { width: 3, over: { width: 3} }
				},
				text: {
					use: false, color: '#666666', family: defaultFont, size: 11, format: 'priceDataFormat'
				},
				tick: { style: null, size: 5, overSize: 1.5 }
            },
            s0: { // 아이템별로 색상을 다르게 주고자 할 경우 해당 s0 값을 시리즈 key 값으로 결정한다.
				area: {
					items: [
						{ color: [ [0, '#2bcdba'], [100, '#6bdccf'] ], over: { color: [[0, '#018b8d'], [100, '#33a2a4']]  } },
						{ color: [ [0, '#ff625f'], [100, '#ff918f'] ], over: { color: [[0, '#ca2b28'], [100, '#d55552']]  } }
					]
				},
				line: {
					normal: {
						width:0, over: { width:0 }
					}
				}
			},
            s1: {
				area: {
					normal: {
						color: [ [0, '#2bcdba'], [100, '#6bdccf'] ], over: { color: {src: '../../chart/img/over.png', color: '#4e6679'} }
					}
				},
				line: {
					normal: {
						color: '#2bcdba', over: { color: '#2bcdba'}
					}
				}, 
				tick : {
					style: 'dot',
					area: {
						normal: {
							color: '#fff', over: { color: '#4e6679' }
						}
					},
					line: {
						normal: {
							color: '#2bcdba', over: { color: '#2bcdba'}
						}
					}
				}
			}
		}
	}
};

series.base = {};

각 영역별 정의된 시리즈에 공통적으로 적용할 스타일을 적습니다.

만약, series.base.area.normal.opacity = 0.4;를 설정하였다면, 

이 영역에 정의된 모든 시리즈의 면 투명도는 0.4로 고정됩니다. (패턴이미지 적용시는 opacity가 적용되지 않는다.)

series.s0 = {};

s0은 시리즈 KEY 명으로 사용자가 편리한 명칭으로 바꾸어도 됩니다.

위의 샘플 코드에서는 s0 시리즈 스타일로 아이템별 색상값을 정의해 놓았으며, 이를 사용하려면 
series.main.s0 = {series : 'column', .... }; 과 같이 스타일에 정의해놓은 같은 시리즈 KEY명으로 바꾸면 됩니다.

series.s1 = {};

 위의 샘플 코드에서는 form : normal 에 해당하는 area, line, tick 에 관련된 스타일을 미리 적용해 놓았습니다.


멀티축 스타일 정의 예시

멀티축 스타일 정의 예시Midnighttruejs
var MULTI = {
	LEFT: yaxisStyles, // Y축 스타일 공통 선언 변수
	RIGHT: {
		basic: {
			position: 'right',
			paddingRight:0, width:50,
			line: {color: '#e3e3e3', width: 1, opacity: 1},
			text: {family: defaultFont, size: 10, color: '#666', align: 'left'}
		},
		black: {
			position: 'right',
			paddingRight:0, width:50,
			line: {color: '#506376', width: 1, opacity: 1},
			text: {family: defaultFont, size: 10, color: '#b0becc', align: 'left'}
		},
		accessibility: {
			position: 'right',
			paddingRight:0, width:50,
			line: {color: '#e3e3e3', width: 1, opacity: 1},
			text: {family: defaultFont, size: 10, color: '#506376', align: 'left'}
		}
	}
};
/**
 * userStyles : 공통화된 스타일 (Object)
 * userSeries : 선언된 시리즈 (Object)
 * theme : html2에서 눌린 버튼에 해당하는 테마 (String)
 */
self.MULTIYAXIS = function(userStyles, userSeries, theme){
	if(!theme) return;
	theme = theme.toLowerCase();

	var isFirst = true, firstYAxisId = '';
	$.each(userSeries, function(key, value) {
		firstYAxisId = '';
		$.each(value, function(sKey, sValue) {
    		if(sKey === 'type') return true;
			// 선언된 시리즈에 yaxisid가 없거나, 첫번째 선언된 시리즈 이후로 yaxisid가 다르게 되어 있는 경우에
			// 상단에 선언한 MULTI 스타일을 확장한다.
    		if(sValue.yaxisid === undefined || firstYAxisId === '' || firstYAxisId !== sValue.yaxisid) {
    			if(isFirst) {
    				userStyles[key].series[sKey].yAxis = $.extend(true, {}, MULTI.LEFT[theme]);
    				
    				firstYAxisId = sKey;
    				isFirst = false;
    			} else {
    				userStyles[key].series[sKey].yAxis = $.extend(true, {}, MULTI.RIGHT[theme]);
    				firstYAxisId = sKey;
    				return false;
    			}
    		}
			
		});
		isFirst = true;
		
	});
	return userStyles;
};

위 샘플코드는 html2 에 있는 멀티축 관련 샘플에 관련된 예제 스크립트입니다.

  • ./chart/sample/html2/multi_column_column.html
  • ./chart/sample/html2/multi_column_line.html
  • ./chart/sample/html2/multi_main_sub.html
  • ./chart/sample/html2/multi_stackcolumn_column.html

4개의 파일에서 사용중입니다.