syn.uicontrols.$chartjs

syn_chartjs 컨트롤은 Chart.js를 이용하여 개발됩니다. Chart.js는 데이터를 시각화하는데 사용되는 인기 있는 오픈 소스 라이브러리입니다. 다양한 유형의 차트를 생성할 수 있습니다. 예를 들어, 막대 차트, 파이 차트, 라인 차트, 도넛 차트, 산점도 등을 생성할 수 있습니다.

<div>
    <div>예시</div>
    <syn_chartjs id="chtChart" syn-datafield="ChartDetail" style="width:100%; height: 320px;" syn-options="{
        type: 'bar',
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        },
        labelID: 'YEAR',
        series: [{
            columnID: '4Y020',
            label: '문화산업경영학과',
            dataType: 'int'
        },{
            columnID: '4Y030',
            label: '정보경영학과',
            dataType: 'int'
        },{
            columnID: '4Y050',
            label: '컴퓨터응용기술학과',
            dataType: 'int'
        },{
            columnID: '4Y060',
            label: '디지털미디어학과',
            dataType: 'int'
        },{
            columnID: '4Y070',
            label: '부동산경영학과',
            dataType: 'int'
        }]
    }"></syn_chartjs>
</div>
<hr />
<div>
    <div>기능</div>
    <input type="button" id="btnGetValue" value="getValue" syn-events="['click']" />
    <input type="button" id="btnSetValue" value="setValue" syn-events="['click']" />
    <input type="button" id="btnClear" value="clear" syn-events="['click']" />
</div>

'use strict';
let $chartjs = {
    prop: {
        metaColumns: {
            "YEAR": {
                "FieldID": "YEAR", "DataType": "int"
            },
            "4Y020": {
                "FieldID": "4Y020", "DataType": "int"
            },
            "4Y030": {
                "FieldID": "4Y030", "DataType": "int"
            },
            "4Y050": {
                "FieldID": "4Y050", "DataType": "int"
            },
            "4Y060": {
                "FieldID": "4Y060", "DataType": "int"
            },
            "4Y070": {
                "FieldID": "4Y070", "DataType": "int"
            }
        },

        dataSource: [
            { "YEAR": 2014, "4Y020": 0, "4Y030": 70, "4Y050": 40, "4Y060": 20, "4Y070": 80 },
            { "YEAR": 2015, "4Y020": 30, "4Y030": 40, "4Y050": 10, "4Y060": 10, "4Y070": 20 },
            { "YEAR": 2016, "4Y020": 90, "4Y030": 10, "4Y050": 80, "4Y060": 50, "4Y070": 30 },
            { "YEAR": 2017, "4Y020": 80, "4Y030": 40, "4Y050": 70, "4Y060": 10, "4Y070": 70 },
            { "YEAR": 2018, "4Y020": 20, "4Y030": 0, "4Y050": 50, "4Y060": 50, "4Y070": 90 },
            { "YEAR": 2019, "4Y020": 90, "4Y030": 20, "4Y050": 30, "4Y060": 90, "4Y070": 50 },
            { "YEAR": 2020, "4Y020": 70, "4Y030": 30, "4Y050": 50, "4Y060": 70, "4Y070": 90 }
        ],
    },

    event: {
        btnGetValue_click() {
            syn.$l.eventLog('btnGetValue_click', JSON.stringify(syn.uicontrols.$chartjs.getValue('chtChart')));
        },

        btnSetValue_click() {
            syn.uicontrols.$chartjs.setValue('chtChart', $this.prop.dataSource, $this.prop.metaColumns);
        },

        btnClear_click() {
            syn.uicontrols.$chartjs.clear('chtChart');
        }
    }
}