lombok 사용 (선택)
요점
변형돤 데이터 - 스크립트에서 데이터를 String으로 형식에 맞게 표현 해주고 Object 파일을 변환하여 data에 반영
* HTML
<script src="/js/jquery-3.6.3.js"></script>
<script src="/js/highcharts-7.0/highcharts.js"></script>
<script src="/js/highcharts-7.0/highcharts-3d.js"></script>
<script src="/js/highcharts-7.0/modules/exporting.js"></script>
<script src="/js/highcharts-7.0/modules/export-data.js"></script>
<div id="party_status_3d_pie"></div>
* Javascript
<script type="text/javascript">
"use strict";
let str = "";
$.ajax({
type : "POST",
url : "/party-status",
async : false,
success : function(data) {
//console.log(data);
//console.log("========>>> data type : " + typeof data); // data type : object
// object -> string (배열 형태)
for(let i = 0; i < data.length; i++ ) {
//console.log("->> i : " + i);
//console.log("->> i : " + data[i].str_hclass);
//console.log("->> i : " + data[i].cnt_class);
str += "[\"" + data[i].str_hclass + "(" + data[i].cnt_per + "%)\", " + data[i].cnt_class + " ]";
if( i < data.length - 1 )
str += ",";
}
str = "[" + str + "]";
//console.log("결과 : " + str);
//console.log("========>>> data str : " + typeof str); // data type : String
let object = JSON.parse(str); // string to object(array)
Highcharts.chart('party_status_3d_pie',
{
chart: {
type : 'pie'
, options3d : {
enabled : true,
alpha : 15
}
, plotShadow: true
, backgroundColor: null
, style : { color: "#ffcc00",
fontSize: "18px"
}
},
title: {
text: "파티 선호는 직업"
,
style: {
color: '#ffcc00',
font: 'bold 16px "consolas", Verdana, sans-serif'
}
},
subtitle: {
text: "실제 파티 직업"
,
style: {
color: '#9f9f9f',
font: 'bold 12px "consolas", Verdana, sans-serif'
}
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: '통계',
data: object
,
style: {
color: '#000000',
font: 'bold 16px "consolas"'
}
}]
});
}
});
</script>
* JAVA API
@PostMapping("/party-status")
public List<dia_party_person> getStatusData( dia_party_person person) throws Exception {
log.debug("●● party-status");
return partyService.party_status_apply_ajax(person);
}
* myBatis
<select id="party_status_apply_ajax" resultType="dia_party_person">
--
SELECT /* 메인파티직업차트통계 : PartyMapper.party_status_apply_ajax */
m.str_hclass
, m.dpp_class
, m.cnt_class
, m.total_cnt
, ROUND((( m.cnt_class / m.total_cnt ) * 100 ),1) AS cnt_per
FROM ( SELECT (SELECT cce_hname FROM con_element b WHERE b.cce_num=a.dpp_class AND b.cce_primary=382) AS str_hclass
, dpp_class
, COUNT(*) AS cnt_class
, (SELECT COUNT(*) FROM dia_party_person WHERE dpp_class NOT IN (31,32,33,34,35,36,37,38,373)) AS total_cnt
FROM dia_party_person a
WHERE a.dpp_class NOT IN (31,32,33,34,35,36,37,38,373)
GROUP
BY a.dpp_class
ORDER
BY COUNT(*) ASC
) m
</select>
|