var pieChart; var datagrid; function fnPieChart(){ pieChart = sb.chart.render("#pieChartWrap", { data : { type:"pie", json: grid_data, keys: { x: "month", value: ["inchon","kimhae","kimpo","jeju","busan"] }, legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"} }, legend: { padding: 20 }, title : { text: "2019년 지역별 자산 대 부채율(단위: %)", position: "top-center", padding: { top: 0, right: 0, bottom: 10, left: 0 } }, extend: { pie: { padding: 1 } }, global: { color : { pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"] }, animation: { show: true, type: "circle", delay: 800, ease: "linear" } } }).render(); }; $(document).ready(function(){ createElements(); fnPieChart(); }); function createElements() { var SBGridProperties = {}; SBGridProperties.parentid = 'sbGridArea'; SBGridProperties.id = 'datagrid'; SBGridProperties.jsonref = 'grid_data'; SBGridProperties.backcoloralternate = '#FAFAFA'; SBGridProperties.rowheight = '30'; SBGridProperties.fixedrowheight = '38'; SBGridProperties.extendlastcol = 'scroll'; SBGridProperties.oneclickedit = true; SBGridProperties.explorerbar = 'move'; SBGridProperties.columns = [ {caption: ['년도','2019년'], width:'7%', ref: 'month', type : 'output', style: 'text-align:center;'}, {caption: ['지역정보','인천'], width:'9%', ref: 'inchon', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김해'], width:'9%', ref: 'kimhae', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김포'], width:'9%', ref: 'jeju', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','부산'], width:'9%', ref: 'busan', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['통계정보','소득비'], width:'12%', ref :'income', type : 'combo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} }, {caption: ['통계정보','지출비'], width:'12%', ref :'outcome', type : 'inputcombo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} }, {caption: ['통계정보','시책발표'], width:'5%', ref :'chk', type : 'checkbox', style: 'text-align:center;' , typeinfo : {checkedvalue : 'Y'} }, {caption: ['통계정보','전환시점'], width:'5%', ref :'rao', type : 'radio', style: 'text-align:center;' }, {caption: ['통계정보','통계발표일'], width:'14%', ref :'stDate', type : 'inputdate', style: 'text-align:center;' , typeinfo : {locale : 'ko', dateformat : 'yymmdd'}}, {caption: ['통계정보','비고'], width:'9%', ref :'etc', type : 'textarea', style: 'text-align:center;'} ]; datagrid = _SBGrid.create(SBGridProperties); datagrid.bind("valuechanged","chartDataChange"); }; function chartDataChange(){ pieChart.data({json:grid_data}).render(); };
var donutChart; var datagrid; function fnDonutChart() { donutChart = sb.chart.render("#donutChartWrap", { data : { type:"donut", json: grid_data, keys: { x: "month", value: ["inchon","kimhae","kimpo","jeju","busan"] }, legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"} }, legend: { padding: 20 }, title : { text: "2019년 지역별 자산 대 부채율(단위: %)", position: "top-center", padding: { top: 0, right: 0, bottom: 10, left: 0 } }, extend: { donut: { padding: 3 } }, global: { color : { pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"] }, animation: { show: true, type: "circle", delay: 800, ease: "linear" } } }).render(); }; $(document).ready(function(){ createElements(); fnDonutChart(); }); function createElements() { var SBGridProperties = {}; SBGridProperties.parentid = 'sbGridArea'; SBGridProperties.id = 'datagrid'; SBGridProperties.jsonref = 'grid_data'; SBGridProperties.backcoloralternate = '#FAFAFA'; SBGridProperties.rowheight = '30'; SBGridProperties.fixedrowheight = '38'; SBGridProperties.extendlastcol = 'scroll'; SBGridProperties.oneclickedit = true; SBGridProperties.explorerbar = 'move'; SBGridProperties.columns = [ {caption: ['년도','2019년'], width:'7%', ref: 'month', type : 'output', style: 'text-align:center;'}, {caption: ['지역정보','인천'], width:'9%', ref: 'inchon', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김해'], width:'9%', ref: 'kimhae', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김포'], width:'9%', ref: 'jeju', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','부산'], width:'9%', ref: 'busan', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['통계정보','소득비'], width:'12%', ref :'income', type : 'combo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} }, {caption: ['통계정보','지출비'], width:'12%', ref :'outcome', type : 'inputcombo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} }, {caption: ['통계정보','시책발표'], width:'5%', ref :'chk', type : 'checkbox', style: 'text-align:center;' , typeinfo : {checkedvalue : 'Y'} }, {caption: ['통계정보','전환시점'], width:'5%', ref :'rao', type : 'radio', style: 'text-align:center;' }, {caption: ['통계정보','통계발표일'], width:'14%', ref :'stDate', type : 'inputdate', style: 'text-align:center;' , typeinfo : {locale : 'ko', dateformat : 'yymmdd'}}, {caption: ['통계정보','비고'], width:'9%', ref :'etc', type : 'textarea', style: 'text-align:center;'} ]; datagrid = _SBGrid.create(SBGridProperties); datagrid.bind("valuechanged","chartDataChange"); }; function chartDataChange(){ donutChart.data({json:grid_data}).render(); };
var gaugeChart; var datagrid; var rateforJan= Number(grid_data[0].rate); function fnGaugeChart(){ gaugeChart = sb.chart.render("#gaugeChartWrap", { data : { type:"gauge", columns:[ ["1월",rateforJan] ] }, title : { text: "2019년 1월 부채율(단위: %)", position: "top-center", padding: { top: 0, right: 10, bottom: 10, left: 20 } }, global:{ color : { pattern:["#49C6B8"] }, animation: { show: true, type: "circle", delay: 800, ease: "bounce" } } }).render(); }; $(document).ready(function(){ createElements(); fnGaugeChart(); }); function createElements() { var SBGridProperties = {}; SBGridProperties.parentid = 'sbGridArea'; SBGridProperties.id = 'datagrid'; SBGridProperties.jsonref = 'grid_data'; SBGridProperties.backcoloralternate = '#FAFAFA'; SBGridProperties.rowheight = '30'; SBGridProperties.fixedrowheight = '38'; SBGridProperties.extendlastcol = 'scroll'; SBGridProperties.oneclickedit = true; SBGridProperties.explorerbar = 'move'; SBGridProperties.columns = [ {caption: ['년도','2019년'], width:'7%', ref: 'month', type : 'output', style: 'text-align:center;'}, {caption: ['지역정보','인천'], width:'9%', ref: 'inchon', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김해'], width:'9%', ref: 'kimhae', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김포'], width:'9%', ref: 'jeju', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','부산'], width:'9%', ref: 'busan', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['통계정보','소득비'], width:'12%', ref :'income', type : 'combo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} }, {caption: ['통계정보','지출비'], width:'12%', ref :'outcome', type : 'inputcombo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} }, {caption: ['통계정보','시책발표'], width:'5%', ref :'chk', type : 'checkbox', style: 'text-align:center;' , typeinfo : {checkedvalue : 'Y'} }, {caption: ['통계정보','전환시점'], width:'5%', ref :'rao', type : 'radio', style: 'text-align:center;' }, {caption: ['통계정보','통계발표일'], width:'14%', ref :'stDate', type : 'inputdate', style: 'text-align:center;' , typeinfo : {locale : 'ko', dateformat : 'yymmdd'}}, {caption: ['통계정보','비고'], width:'9%', ref :'etc', type : 'textarea', style: 'text-align:center;'} ]; datagrid = _SBGrid.create(SBGridProperties); datagrid.bind("valuechanged","chartDataChange"); }; function chartDataChange(){ gaugeChart.data({json:grid_data}).render(); };
var bubbleChart; var datagrid; function fnBubbleChart(){ bubbleChart= sb.chart.render("#bubbleChartWrap", { data : { type: "bubble", json: grid_data, keys: { x: "month", value: ["inchon","kimhae","kimpo","jeju","busan"] }, legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"} }, title : { text: "2019년 지역별 자산 대 부채액(단위: 천)", position: "top-center", padding: { top: 0, right: 10, bottom: 10, left: 20 } }, axis: { x : { type: "category", categories: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"] }, y: { show:false } }, extend: { bubble: { maxR: 25 } }, legend: { padding:20 }, global: { color : { pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"] }, animation: { show: true, type: "pop", delay: 800, ease: "linear" } } }).render(); }; $(document).ready(function(){ createElements(); fnBubbleChart(); }); function createElements() { var SBGridProperties = {}; SBGridProperties.parentid = 'sbGridArea'; SBGridProperties.id = 'datagrid'; SBGridProperties.jsonref = 'grid_data'; SBGridProperties.backcoloralternate = '#FAFAFA'; SBGridProperties.rowheight = '30'; SBGridProperties.fixedrowheight = '38'; SBGridProperties.extendlastcol = 'scroll'; SBGridProperties.oneclickedit = true; SBGridProperties.explorerbar = 'move'; SBGridProperties.columns = [ {caption: ['년도','2019년'], width:'7%', ref: 'month', type : 'output', style: 'text-align:center;'}, {caption: ['지역정보','인천'], width:'9%', ref: 'inchon', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김해'], width:'9%', ref: 'kimhae', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김포'], width:'9%', ref: 'jeju', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','부산'], width:'9%', ref: 'busan', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['통계정보','소득비'], width:'12%', ref :'income', type : 'combo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} }, {caption: ['통계정보','지출비'], width:'12%', ref :'outcome', type : 'inputcombo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} }, {caption: ['통계정보','시책발표'], width:'5%', ref :'chk', type : 'checkbox', style: 'text-align:center;' , typeinfo : {checkedvalue : 'Y'} }, {caption: ['통계정보','전환시점'], width:'5%', ref :'rao', type : 'radio', style: 'text-align:center;' }, {caption: ['통계정보','통계발표일'], width:'14%', ref :'stDate', type : 'inputdate', style: 'text-align:center;' , typeinfo : {locale : 'ko', dateformat : 'yymmdd'}}, {caption: ['통계정보','비고'], width:'9%', ref :'etc', type : 'textarea', style: 'text-align:center;'} ]; datagrid = _SBGrid.create(SBGridProperties); datagrid.bind("valuechanged","chartDataChange"); }; function chartDataChange(){ bubbleChart.data({json:grid_data}).render(); };
var scatterPlotChart; var datagrid; function fnScatterPlotChart(){ scatterPlotChart= sb.chart.render("#scatterPlotChartWrap", { data : { type: "scatter", json: grid_data, keys: { x: "month", value: ["inchon","kimhae","kimpo","jeju","busan"] }, legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"} }, title : { text: "2019년 지역별 자산 대 부채액(단위: 천)", position: "top-center", padding: { top: 0, right: 10, bottom: 10, left: 20 } }, axis: { x : { type: "category", categories: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"] }, y: { show:false } }, extend: { bubble: { maxR: 25 } }, legend: { show: true, position: "inset", inset: { anchor:"top-right", x: 0, y: -20 }, padding: 20 }, global: { color : { pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"] }, animation: { show: true, // animation 효과 사용여부 (boolean) type: "pop", // 적용할 animation type (string) delay: 800, // animation 효과가 완료되기까지의 시간(number, 밀리초단위) ease: "linear" // animation 가속도 효과 } } }).render(); }; $(document).ready(function(){ createElements(); fnScatterPlotChart(); }); function createElements() { var SBGridProperties = {}; SBGridProperties.parentid = 'sbGridArea'; SBGridProperties.id = 'datagrid'; SBGridProperties.jsonref = 'grid_data'; SBGridProperties.backcoloralternate = '#FAFAFA'; SBGridProperties.rowheight = '30'; SBGridProperties.fixedrowheight = '38'; SBGridProperties.extendlastcol = 'scroll'; SBGridProperties.oneclickedit = true; SBGridProperties.explorerbar = 'move'; SBGridProperties.columns = [ {caption: ['년도','2019년'], width:'7%', ref: 'month', type : 'output', style: 'text-align:center;'}, {caption: ['지역정보','인천'], width:'9%', ref: 'inchon', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김해'], width:'9%', ref: 'kimhae', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김포'], width:'9%', ref: 'jeju', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','부산'], width:'9%', ref: 'busan', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['통계정보','소득비'], width:'12%', ref :'income', type : 'combo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} }, {caption: ['통계정보','지출비'], width:'12%', ref :'outcome', type : 'inputcombo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} }, {caption: ['통계정보','시책발표'], width:'5%', ref :'chk', type : 'checkbox', style: 'text-align:center;' , typeinfo : {checkedvalue : 'Y'} }, {caption: ['통계정보','전환시점'], width:'5%', ref :'rao', type : 'radio', style: 'text-align:center;' }, {caption: ['통계정보','통계발표일'], width:'14%', ref :'stDate', type : 'inputdate', style: 'text-align:center;' , typeinfo : {locale : 'ko', dateformat : 'yymmdd'}}, {caption: ['통계정보','비고'], width:'9%', ref :'etc', type : 'textarea', style: 'text-align:center;'} ]; datagrid = _SBGrid.create(SBGridProperties); datagrid.bind("valuechanged","chartDataChange"); }; function chartDataChange(){ scatterPlotChart.data({json:grid_data}).render(); };
var combinationChart; var datagrid; function fnCombinationChart(){ combinationChart = sb.chart.render("#combinationChartWrap", { data : { types:{"inchon":"bar", "kimhae":"bar", "kimpo":"bar", "jeju":"spline", "busan":"spline"}, json: grid_data, keys: { x: "month", value: ["inchon","kimhae","kimpo","jeju","busan"] }, legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"} }, legend: { padding: 20 }, title : { text: "2019년 지역별 자산 대 부채액(단위: 천)", position: "top-center", padding: { top: 0, right: 0, bottom: 10, left: 0 } }, axis: { x : { type: "category" } }, grid: { x : { show:false}, y : { show:false} }, tooltip: { format: { value: function(value, ratio, id, index) { return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } } }, global: { color : { pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"] }, animation: { show: true, type: "rise", types: {data1: "rise", data2: "fill"}, delay: 800, ease: "linear" } } }).render(); }; $(document).ready(function(){ createElements(); fnCombinationChart(); }); function createElements() { var SBGridProperties = {}; SBGridProperties.parentid = 'sbGridArea'; SBGridProperties.id = 'datagrid'; SBGridProperties.jsonref = 'grid_data'; SBGridProperties.backcoloralternate = '#FAFAFA'; SBGridProperties.rowheight = '30'; SBGridProperties.fixedrowheight = '38'; SBGridProperties.extendlastcol = 'scroll'; SBGridProperties.oneclickedit = true; SBGridProperties.explorerbar = 'move'; SBGridProperties.columns = [ {caption: ['년도','2019년'], width:'7%', ref: 'month', type : 'output', style: 'text-align:center;'}, {caption: ['지역정보','인천'], width:'9%', ref: 'inchon', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김해'], width:'9%', ref: 'kimhae', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김포'], width:'9%', ref: 'jeju', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','부산'], width:'9%', ref: 'busan', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['통계정보','소득비'], width:'12%', ref :'income', type : 'combo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} }, {caption: ['통계정보','지출비'], width:'12%', ref :'outcome', type : 'inputcombo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} }, {caption: ['통계정보','시책발표'], width:'5%', ref :'chk', type : 'checkbox', style: 'text-align:center;' , typeinfo : {checkedvalue : 'Y'} }, {caption: ['통계정보','전환시점'], width:'5%', ref :'rao', type : 'radio', style: 'text-align:center;' }, {caption: ['통계정보','통계발표일'], width:'14%', ref :'stDate', type : 'inputdate', style: 'text-align:center;' , typeinfo : {locale : 'ko', dateformat : 'yymmdd'}}, {caption: ['통계정보','비고'], width:'9%', ref :'etc', type : 'textarea', style: 'text-align:center;'} ]; datagrid = _SBGrid.create(SBGridProperties); datagrid.bind("valuechanged","chartDataChange"); }; function chartDataChange(){ combinationChart.data({json:grid_data}).render(); };
var stepChart; var datagrid; function fnStepChart(){ stepChart = sb.chart.render("#stepChartWrap", { data : { type:"step", json: grid_data, keys: { x: "month", value: ["inchon","kimhae","kimpo","jeju","busan"] }, legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"}, }, legend: { show: true, position: "inset", inset: { anchor:"top-right", x: 0, y: -20 }, padding: 20 }, title : { text: "2019년 지역별 자산 대 부채액(단위: 천)", position: "top-center", padding: { top: 0, right: 0, bottom: 10, left: 0 } }, axis: { x : { type: "category" } }, grid: { x : { show:false}, y : { show:false} }, tooltip: { format: { value: function(value, ratio, id, index) { return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } } }, global: { color : { pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"] }, animation: { show: true, // animation 효과 사용여부 (boolean) type: "rise", // 적용할 animation type (string) delay: 800, // animation 효과가 완료되기까지의 시간(number, 밀리초단위) ease: "linear" // animation 가속도 효과 } } }).render(); }; $(document).ready(function(){ createElements(); fnStepChart(); }); function createElements() { var SBGridProperties = {}; SBGridProperties.parentid = 'sbGridArea'; SBGridProperties.id = 'datagrid'; SBGridProperties.jsonref = 'grid_data'; SBGridProperties.backcoloralternate = '#FAFAFA'; SBGridProperties.rowheight = '30'; SBGridProperties.fixedrowheight = '38'; SBGridProperties.extendlastcol = 'scroll'; SBGridProperties.oneclickedit = true; SBGridProperties.explorerbar = 'move'; SBGridProperties.columns = [ {caption: ['년도','2019년'], width:'7%', ref: 'month', type : 'output', style: 'text-align:center;'}, {caption: ['지역정보','인천'], width:'9%', ref: 'inchon', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김해'], width:'9%', ref: 'kimhae', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김포'], width:'9%', ref: 'jeju', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','부산'], width:'9%', ref: 'busan', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['통계정보','소득비'], width:'12%', ref :'income', type : 'combo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} }, {caption: ['통계정보','지출비'], width:'12%', ref :'outcome', type : 'inputcombo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} }, {caption: ['통계정보','시책발표'], width:'5%', ref :'chk', type : 'checkbox', style: 'text-align:center;' , typeinfo : {checkedvalue : 'Y'} }, {caption: ['통계정보','전환시점'], width:'5%', ref :'rao', type : 'radio', style: 'text-align:center;' }, {caption: ['통계정보','통계발표일'], width:'14%', ref :'stDate', type : 'inputdate', style: 'text-align:center;' , typeinfo : {locale : 'ko', dateformat : 'yymmdd'}}, {caption: ['통계정보','비고'], width:'9%', ref :'etc', type : 'textarea', style: 'text-align:center;'} ]; datagrid = _SBGrid.create(SBGridProperties); datagrid.bind("valuechanged","chartDataChange"); }; function chartDataChange(){ stepChart.data({json:grid_data}).render(); };
var radarChart; var datagrid; function fnRadarChart(){ radarChart = sb.chart.render("#radarChartWrap", { data : { type:"radar", json: grid_data, keys: { x: "month", value: ["inchon","kimhae","kimpo","jeju","busan"] }, legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"} }, legend: { padding: 20 }, title : { text: "2019년 지역별 자산 대 부채율(단위: %)", position: "top-center", padding: { top: 0, right: 0, bottom: 10, left: 0 } }, extend: { donut: { padding: 3 } }, global: { color : { pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"] }, animation: { show: true, // animation 효과 사용여부 (boolean) type: "circle", // 적용할 animation type (string) delay: 800, // animation 효과가 완료되기까지의 시간(number, 밀리초단위) ease: "linear" // animation 가속도 효과 } } }).render(); }; $(document).ready(function(){ createElements(); fnRadarChart(); }); function createElements() { var SBGridProperties = {}; SBGridProperties.parentid = 'sbGridArea'; SBGridProperties.id = 'datagrid'; SBGridProperties.jsonref = 'grid_data'; SBGridProperties.backcoloralternate = '#FAFAFA'; SBGridProperties.rowheight = '30'; SBGridProperties.fixedrowheight = '38'; SBGridProperties.extendlastcol = 'scroll'; SBGridProperties.oneclickedit = true; SBGridProperties.explorerbar = 'move'; SBGridProperties.columns = [ {caption: ['년도','2019년'], width:'7%', ref: 'month', type : 'output', style: 'text-align:center;'}, {caption: ['지역정보','인천'], width:'9%', ref: 'inchon', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김해'], width:'9%', ref: 'kimhae', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','김포'], width:'9%', ref: 'jeju', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['지역정보','부산'], width:'9%', ref: 'busan', type : 'input', style: 'text-align:center;' , "format" : "#,###" }, {caption: ['통계정보','소득비'], width:'12%', ref :'income', type : 'combo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} }, {caption: ['통계정보','지출비'], width:'12%', ref :'outcome', type : 'inputcombo', style: 'text-align:center;' , typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} }, {caption: ['통계정보','시책발표'], width:'5%', ref :'chk', type : 'checkbox', style: 'text-align:center;' , typeinfo : {checkedvalue : 'Y'} }, {caption: ['통계정보','전환시점'], width:'5%', ref :'rao', type : 'radio', style: 'text-align:center;' }, {caption: ['통계정보','통계발표일'], width:'14%', ref :'stDate', type : 'inputdate', style: 'text-align:center;' , typeinfo : {locale : 'ko', dateformat : 'yymmdd'}}, {caption: ['통계정보','비고'], width:'9%', ref :'etc', type : 'textarea', style: 'text-align:center;'} ]; datagrid = _SBGrid.create(SBGridProperties); datagrid.bind("valuechanged","chartDataChange"); }; function chartDataChange(){ radarChart.data({json:grid_data}).render(); };