차트를 적용하다보면 동일한 색상의 비슷한 디자인을 가지고 웹사이트 제작을 진행하는 경우가 많습니다.
매 페이지마다 스타일을 초기화 하는 것도 하나의 방법이지만, 좀 더 개발에 도움을 주기 위하여
스타일 공통화 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/lib | webponent.test.js | html2 디렉토리에 있는 html에 필요한 데이터와 테스트 동작에 필요한 이벤트들이 작성되어 있습니다. html2 디렉토리 샘플에서만 필요한 파일입니다. |
var 기본구성 = { main: { basic: { // ... 스타일 정의 }, black: { // ... 스타일 정의 }, accessibility: { // ... 스타일 정의 } }, sub: { basic: { // ... 스타일 정의 }, black: { // ... 스타일 정의 }, accessibility: { // ... 스타일 정의 } } };
/sample/html2/ 내에 있는 .html 파일에 있는 테마 기본, 블랙, 접근성 별로 스타일을 구분지었습니다.
webponent.chart.style.js 를 사용하고자 한다면 테마를 추가하거나, 기존 테마를 수정하면 됩니다.
차트 초기화 시에 설정하는 series 보다 더 많은 스타일을 미리 정의해 놓을 수 있습니다.
series보다 정의해놓은 styles가 적을 경우에는 에러가 발생됩니다.
// 레이아웃 스타일 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 } };
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.area.normal.opacity = 0.4;를 설정하였다면,
이 영역에 정의된 모든 시리즈의 면 투명도는 0.4로 고정됩니다. (패턴이미지 적용시는 opacity가 적용되지 않는다.)
s0은 시리즈 KEY 명으로 사용자가 편리한 명칭으로 바꾸어도 됩니다.
위의 샘플 코드에서는 s0 시리즈 스타일로 아이템별 색상값을 정의해 놓았으며, 이를 사용하려면
series.main.s0 = {series : 'column', .... }; 과 같이 스타일에 정의해놓은 같은 시리즈 KEY명으로 바꾸면 됩니다.
위의 샘플 코드에서는 form : normal 에 해당하는 area, line, tick 에 관련된 스타일을 미리 적용해 놓았습니다.
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 에 있는 멀티축 관련 샘플에 관련된 예제 스크립트입니다.
4개의 파일에서 사용중입니다.