막대그래프형 소스보기
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js" /></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js" /></script>
<script type="text/javascript">
$.ajaxPrefilter('json', function(options, orig, jqXHR){
return 'jsonp';
});
$.ajax({
url : 'https://stat.me.go.kr/openapi/Sttsapitbldata.do?STATBL_ID=T213003007558461&DTACYCLE_CD=YY&Type=json',
type : 'GET',
dataType : 'json',
success : function (result) {
drawBarChart(result);
drawPieChart(result);
drawGrid(result);
},
error : function (result) {
}
});
function drawBarChart(jsonData) {
var rows = jsonData.SttsApiTblData[1].row;
if(rows) {
var representativeRow = rows[0],
statNm = representativeRow.STATBL_ID,
itemNm1 = representativeRow.ITM_NM,
uiNm = representativeRow.UI_NM;
var dataArray = [];
$.each(rows, function(idx, row) {
var tmp = [];
tmp.push(row.WRTTIME_IDTFR_ID);
tmp.push(Number(row.DTA_VAL));
dataArray.push(tmp);
});
$('#barChart').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'category',
labels: {
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: uiNm
},
labels: {
formatter: function(){
return commaWon(this.value);
}
}
},
tooltip: {
pointFormat: '{point.y}'+uiNm
},
series: [{
name: itemNm1,
data: dataArray
}]
});
}
}
</script>
<div id="barChart" style="min-width:300px;height:400px;margin:0 auto;"></div>
원그래프형 소스보기
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js" /></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js" /></script>
<script type="text/javascript">
$.ajaxPrefilter('json', function(options, orig, jqXHR){
return 'jsonp';
});
$.ajax({
url : 'https://stat.me.go.kr/openapi/Sttsapitbldata.do?STATBL_ID=T213003007558461&DTACYCLE_CD=YY&Type=json',
type : 'GET',
dataType : 'json',
success : function (result) {
drawBarChart(result);
drawPieChart(result);
drawGrid(result);
},
error : function (result) {
}
});
function drawPieChart(jsonData) {
var rows = jsonData.SttsApiTblData[1].row;
if(rows) {
var representativeRow = rows[0], statNm = representativeRow.STATBL_ID,
itemNm1 = representativeRow.ITM_NM,
uiNm = representativeRow.UI_NM;
var dataArray = [];
$.each(rows, function(idx, row) {
var tmp = [];
tmp.push(row.WRTTIME_IDTFR_ID);
tmp.push(Number(row.DTA_VAL));
dataArray.push(tmp);
});
$('#pieChart').highcharts({
credits: {
enabled: false
},
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
colorByPoint: true,
data: dataArray
}]
});
}
}
</script>
<div id="pieChart" style="min-width:300px;height:400px;margin:0 auto;"></div>
텍스트형 소스보기
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
$.ajaxPrefilter('json', function(options, orig, jqXHR){
return 'jsonp';
});
$.ajax({
url : 'https://stat.me.go.kr/openapi/Sttsapitbldata.do?STATBL_ID=T213003007558461&DTACYCLE_CD=YY&Type=json',
type : 'GET',
dataType : 'json',
success : function (result) {
drawBarChart(result);
drawPieChart(result);
drawGrid(result);
},
error : function (result) {
}
});
function drawGrid(jsonData) {
var rows = jsonData.ArcData.row; // ArcData위치에 해당하는 변수명은 각 API마다 url의 Service명과 동일하게 변합니다.
if(rows) {
var html = '';
$.each(rows, function(idx, row) {
html += '<tr>';
html += ' <td style="border: 2px solid gray; text-align: center;">' + row.ITEM_NAME2 + '</td>';
html += ' <td style="border: 2px solid gray; text-align: center;">' + row.DATA_VALUE + '</td>';
html += '</tr>';
});
$('#grid').append(html);
}
}
</script>
<table style="border: 2px solid gray; width: 700px; text-align: center;">
<colgroup>
<col width="50%">
<col width="">
</colgroup>
<thead>
<tr>
<th style="border: 2px solid gray; text-align: center;">지역</th>
<th style="border: 2px solid gray; text-align: center;">부담지수</th>
</tr>
</thead>
<tbody id="grid">
</tbody>
</table>
