chart.js 관련

차트 플러그인 중 많이쓰는 chart.js 관련 사항

 

다운로드

https://www.chartjs.org/

Chart.js | Open source HTML5 Charts for your website

 

 

차트에 데이터 값 표기 (플러그인) 

https://chartjs-plugin-datalabels.netlify.com/

https://github.com/chartjs/chartjs-plugin-datalabels/releases

chartjs/chartjs-plugin-datalabels

 

 

chartjs-plugin-datalabels-0.6.0.zip

0.38MB

 

 

샘플코드

 

제이쿼리는 기본-

 

<canvas id="chart-area" style="height:400px"></canvas>

<canvas id="chart1" style="height:400px"></canvas>

<canvas id="chart2" style="height:400px"></canvas>



<script src="/plugin/chart.js/dist/2.8.0/Chart.min.js" type="text/javascript"></script>
<script src="/plugin/chart.js/dist/chartjs-plugin-datalabels.js" type="text/javascript"></script>




<script type="text/javascript">

    //랜덤 함수 (공통)
    function randomRange(n1, n2) {
        return Math.floor( (Math.random() * (n2 - n1 + 1)) + n1 );
    }


    //그래프 컬러 (공통)
    window.chartColors = {
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(201, 203, 207)'
    };


    //파이 차트 초기값
    var pieConfig = {
        type: 'pie',
        options: {
            responsive: true,
            plugins: {
                datalabels: {
                    color: 'white',
                    display: function(context) {
                        return context.dataset.data[context.dataIndex] > 0;
                    },
                    font: {
                        weight: 'bold',
                        size:16
                    },
                    formatter: Math.round
                }
            }
        }
    };


    //Bar 차트 초기값 (2개라 가정하고..그래프별 각각 설정해 주지 않으면 오류가 발생하네..)
    var barConfig = [];
    for (var i=0; i <= 2; i++){
        barConfig[i] = {
            type: 'horizontalBar',
            options: {
                legend: {
                    display: false
                },
                title: {
                    display: false
                },
                tooltips: {
                    mode: 'index',
                    intersect: true
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                },
                plugins: {
                    datalabels: {
                        color: 'white',
                        display: function(context) {
                            return context.dataset.data[context.dataIndex] > 1;
                        },
                        font: {
                            weight: 'bold'
                        },
                        formatter: Math.round,
                        anchor: 'end',
                        align: 'start',
                    }
                }
            }
        };
    }



    window.onload = function() {

        /*==================================================================
        파이 차트 START
        ==================================================================*/
        var ctx = document.getElementById('chart-area').getContext('2d');
        window.myPie = new Chart(ctx, pieConfig);
        prjDataSet(); //데이터 SET
        /*==================================================================
        파이 차트 END
        ==================================================================*/


        /*==================================================================
        바 차트 1 START
        ==================================================================*/
        var ctx = document.getElementById('chart1').getContext('2d');
        window.myChart1 = new Chart(ctx, barConfig[0]);
        cha01DataSet();
        /*==================================================================
        바 차트 1 END
        ==================================================================*/



        /*==================================================================
        바 차트 2 START
        ==================================================================*/
        var ctx = document.getElementById('chart2').getContext('2d');
        window.myChart2 = new Chart(ctx, barConfig[1]);
        cha02DataSet();
        /*==================================================================
        바 차트 2 END
        ==================================================================*/
    };



    //파이 차트 데이터 SET
    function prjDataSet(){
        var colorNames = Object.keys(window.chartColors);

        var prjData = [];
        var prjBgColor = [];
        var prjLabels = [];


//데이터 셋팅
        for (i=1; i<=3; i++){
//Data Insert
            prjData.push(randomRange(1, 100)); //임시 데이터
            prjBgColor.push(window.chartColors[colorNames[i-1]]);
            prjLabels.push('라벨'+i);
        }

        var newData = {
            datasets: [{
                data: prjData,
                backgroundColor: prjBgColor
            }],
            labels: prjLabels
        }

        window.myPie.data = newData;
        window.myPie.update();

    }


    //바 차트 1 데이터 SET
    function cha01DataSet(){

//y 축
        window.myChart1.data.labels = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];

        var newDataset;

        newDataset = {
            label: '완료',
            backgroundColor: window.chartColors.blue,
            data: [randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100)]
        };
        window.myChart1.data.datasets.push(newDataset);

        newDataset = {
            label: '대기',
            backgroundColor: window.chartColors.red,
            data: [5, 2, 4, 0, 1, 5, 4, 0, 7, 0, 0, 5]
        };
        window.myChart1.data.datasets.push(newDataset);


        window.myChart1.options.title.display = true;
        window.myChart1.options.title.text = "라벨";

        window.myChart1.update();
    }









    //바 차트 2 데이터 SET
    function cha01DataSet(){

//y 축
        window.myChart2.data.labels = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];

        var newDataset;

        newDataset = {
            label: '완료',
            backgroundColor: window.chartColors.blue,
            data: [randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100), randomRange(1, 100)]
        };
        window.myChart2.data.datasets.push(newDataset);

        newDataset = {
            label: '대기',
            backgroundColor: window.chartColors.red,
            data: [5, 2, 4, 0, 1, 5, 4, 0, 7, 0, 0, 5]
        };
        window.myChart2.data.datasets.push(newDataset);


        window.myChart2.options.title.display = true;
        window.myChart2.options.title.text = "라벨";

        window.myChart2.update();
    }


</script>