Vertical Stacked Bar Chart
Vertical Stacked Bar Chart 입니다.
(* 우측의 범례를 선택하시면 해당 부분만 나타낼 수 있습니다.)
요약
Vertical Stacked Bar Chart 입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
<title> SB Grid </title>
<link href="/kr/co/softbowl/css/Sbgrid_default.css" type="text/css" rel="stylesheet" />
<link href="/css/sort.css" type="text/css" rel="stylesheet" />
<jsp:include page="/view/common/cmCommon.jsp"/>
<script type="text/javascript" src="/kr/co/softbowl/SBGrid.js"></script>
<script type="text/javascript" src="/js/jsondata/DATA_JSON_POI_100.js"></script>
<script type="text/javascript">
SBGrid.DEF.DOMAIN = "../../";
var datagrid1;
var sbChart1;
var grid_data = [
{
"month": "1월",
"inchon": "1300",
"kimhae": "980",
"kimpo": "450",
"jeju": "300",
"busan": "220"
}, {
"month": "2월",
"inchon": "1510",
"kimhae": "580",
"kimpo": "340",
"jeju": "320",
"busan": "300"
}, {
"month": "3월",
"inchon": "1440",
"kimhae": "880",
"kimpo": "450",
"jeju": "200",
"busan": "180"
}, {
"month": "4월",
"inchon": "1320",
"kimhae": "930",
"kimpo": "420",
"jeju": "320",
"busan": "210"
}, {
"month": "5월",
"inchon": "1310",
"kimhae": "980",
"kimpo": "450",
"jeju": "300",
"busan": "420"
}, {
"month": "6월",
"inchon": "1610",
"kimhae": "980",
"kimpo": "450",
"jeju": "300",
"busan": "220"
}, {
"month": "7월",
"inchon": "1640",
"kimhae": "1080",
"kimpo": "450",
"jeju": "320",
"busan": "210"
}, {
"month": "8월",
"inchon": "1680",
"kimhae": "1100",
"kimpo": "650",
"jeju": "400",
"busan": "220"
}, {
"month": "9월",
"inchon": "1310",
"kimhae": "980",
"kimpo": "450",
"jeju": "320",
"busan": "220"
}, {
"month": "10월",
"inchon": "1310",
"kimhae": "980",
"kimpo": "450",
"jeju": "300",
"busan": "220"
}, {
"month": "11월",
"inchon": "1010",
"kimhae": "780",
"kimpo": "310",
"jeju": "410",
"busan": "110"
}, {
"month": "12월",
"inchon": "1200",
"kimhae": "800",
"kimpo": "400",
"jeju": "300",
"busan": "220"
}
];
$(document).ready(function () {
__createChartElements("vsbar");
__createElements();
});
function __createElements() {
var caption, colWd, style;
caption = "2014년^인천공항^김해공항^김포공항^제주공항^부산공항";
colWd = "10%,18%,18%,18%,18%,18%";
style = "left:1px; top:1px; width:100%; height:380px;";
var GridInitInfo = {
"strParentId": "sbGridArea",
"strId": "datagrid1",
"strCaption": caption,
"strColWidth": colWd,
"strJsonRef": "grid_data",
"strStyle": style,
"strDataHeight": "29",
"strBackColorAlternate": "#f7f7f7",
"strExplorerbar": "sortshowmove",
"bCreateAll": true
};
var SBGridColumnInitInfo = [
{ "id": "col1", "type": "output", "ref": "month", "style": "text-align:center;" },
{ "id": "col2", "type": "output", "ref": "inchon", "style": "text-align:right;padding-right:5px", "format" : "#,###" },
{ "id": "col3", "type": "output", "ref": "kimhae", "style": "text-align:right;padding-right:5px", "format": "#,###" },
{ "id": "col4", "type": "output", "ref": "kimpo", "style": "text-align:right;padding-right:5px", "format": "#,###" },
{ "id": "col5", "type": "output", "ref": "jeju", "style": "text-align:right;padding-right:5px", "format": "#,###" },
{ "id": "col6", "type": "output", "ref": "busan", "style": "text-align:right;padding-right:5px", "format": "#,###" }
];
if (SBGrid.getGrid('datagrid1') != null) {
datagrid1.destroy();
datagrid1 = null;
}
datagrid1 = createSBGrid(GridInitInfo, SBGridColumnInitInfo);
datagrid1.setRowHeight(0, 30);
}
function createSBGrid(SBGridInitInfo, SBGridColumnInitInfo) {
var objJSONdata = new Object();
objJSONdata.objSBGridInitInfo = SBGridInitInfo;
objJSONdata.arSBGridColumnInitInfo = SBGridColumnInitInfo;
return SBGrid.DEF.createSBGrid(objJSONdata);
};
function __getAppName() {
return "./";
}
function createChart(type) {
sbChart1.createChart(type);
}
function __createChartElements(type) {
var attrs = {
id: "sbchart1",
parentId: "sbChartArea",
margin: { left: 50, top: 20, right: 80, bottom: 20 },
width: 800,
height: 400,
colors: ["#218BEE", "#FFAB00", "#CEE100", "#4cd964", "#FF6E02", "#007aff", "#5856d6", "#ff2d55", "#7ECA8F", "#E48A70", "#75C165", "#F3c47c"],
jsonRef: "grid_data",
category: "month",
label: { inchon: "인천공항", kimhae: "김해공항",kimpo: "김포공항", jeju: "제주공항", busan: "부산공항" },
title: "2014년도 공항 이용고객 (단위 : 만명)",
animate: true,
data: [{
keys: ["inchon", "kimhae", "kimpo", "jeju", "busan"],
type: "bar",
lineType: "line",
labelType: "value",
axis: "y"
}, {
keys: ["busan", "kimpo", "kimhae"],
type: "line",
axis: "y2"
}],
axis: {
x: {
show: true,
orient: "bottom"
},
y: {
show: true,
orient: "left",
ticks: 10,
tickFormat: ".1",
text: "고객수"
},
y2: {
show: false,
orient: "left",
ticks: 10,
tickFormat: ".1",
text: ""
}
},
legend: {
show: true,
position: "right",
}
};
//chart
sbChart1 = createSBChart(null, attrs);
sbChart1.createChart(type);
}
</script>
</head>
<body onload="createElements()" class="sbgrid_body" >
<div id="sbChartArea"></div>
<div id="sbGridArea"></div>
</body>
</html>