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>