Chart Series 중 Area Series (면 시리즈)의 샘플 및 설정.
<!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>
// 면 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 }
단색
area.up.color = '영문 색상명 혹은 RGB값'; // 상승
area.up.over.color = '영문 색상명 혹은 RGB값'; // 상승
color | string | 영문 색상명 혹은 RGB값 |
그라데이션 형태
area.up.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' ] ]; // 상승
color | array | 그라데이션 배열 형식 |
Background Image 사용
color 안에 color를 또 지정하는 이유 : 아이템의 width가 5픽셀 이하일때는 패턴이미지가 보이지 않는 경우가 대다수이다.
그래서 아이템의 넓이가 5픽셀 이하일 때는 속도개선 차원에서 이미지대신 단색으로 처리되도록 하기 위함이다.
area.up.color = {src : 'image URL', color: '영문 색상명 혹은 RGB값' } ; // 상승
area.up.over.color = {src : 'image URL', color: '영문 색상명 혹은 RGB값' } ; // 상승
src | string(url) | 이미지 주소, 파일명 + 확장자까지 |
color | string | 영문 색상명 혹은 RGB값 |
면의 투명도 0 ~ 1
gradient, pattern을 사용할경우에는 투명도 반영 안됨.
area.up.opacity = 0 ~ 1; // 상승
area.up.over.opacity = 0 ~ 1; // 상승
opacity | number | 투명도(default는 1, 0 ~ 1의 사이값 입력) |
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' } } } } } }
선의 색상(면의 단색 정의 방법과 동일함)
line.up.color = '영문 색상명 혹은 RGB값'; // 상승
line.up.over.color = '영문 색상명 혹은 RGB값'; // 상승
color | string | 영문 색상명 혹은 RGB값 |
선의 두께 ( default 는 1 이며, 0이면 선을 그리지 않는다.)
line.up.width = 0 ~ ...; // 상승
line.up.over.width = 0 ~ ...; // 상승
color | string | 영문 색상명 혹은 RGB값 |
선의 투명도 ( default 는 1 )
line.up.opacity = 0 ~ 1; // 상승
line.up.over.opacity = 0 ~ 1; // 상승
opacity | number | 투명도(default는 1, 0 ~ 1의 사이값 입력) |
var styles = { series: { s1: { line: { normal: { color: 'blue', width: 2, opacity: 0.5, over: { color: 'blue', width: 2, opacity: 1 } } } } } }