chartjs 3.7 에서 챠트 만들기 > jquery

• 목록

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
    <div style="padding:20px 20px;">

        <input type="button" name="btn_add" id="btn_reload" value="  삭제/추가  " />


        <input type="button" name="btn_add" id="btn_add" value="  데이타 추가  " />
        <input type="button" name="btn_del" id="btn_del" value="  데이타 삭제  " />
        <input type="button" name="btn_edit" id="btn_edit" value="  데이타 수정  " />

        <input type="button" name="addDataSet" id="addDataSet" value="  데이타셋 추가  " />
        <input type="button" name="delDataset" id="delDataset" value="  데이타셋 삭제  " />
    </div>


<div class="container-fluid">

    <div class="row" style="margin-top:20px;">
        <div class="col-12"><canvas id="myChart1" style="width:300px;height:200px;"></canvas></div>
    </div>

    <div class="row" style="margin-top:20px;">
        <div class="col-lg-3"><canvas id="myChart2" style="width:300px;height:200px;"></canvas></div>
        <div class="col-lg-3"><canvas id="myChart3" style="width:300px;height:200px;"></canvas></div>
        <div class="col-lg-3"><canvas id="myChart4" style="width:300px;height:200px;"></canvas></div>
        <div class="col-lg-3"><canvas id="myChart5" style="width:300px;height:200px;"></canvas></div>
    </div>

    <div class="row" style="margin-top:20px;">
        <div class="col-lg-3"><canvas id="myChart6" style="width:300px;height:200px;"></canvas></div>
        <div class="col-lg-3"><canvas id="myChart7" style="width:300px;height:200px;"></canvas></div>
        <div class="col-lg-3"><canvas id="myChart8" style="width:300px;height:200px;"></canvas></div>
        <div class="col-lg-3"><canvas id="myChart9" style="width:300px;height:200px;"></canvas></div>
    </div>

</div>


<script>
    var opt = [];
    //opt["label"] = "label 타이틀";
    //opt["labels"] = ['January','February','March','April','May','June', 'dd', 'ss'];
    opt["bgcolor"] = 'rgb(255, 99, 132)';
    opt["border"] = 'rgb(255, 99, 132)';
    //opt["data"] = [50, 10, 5, 2, 20, 30, 45];
    opt["type"] = "line";   // 챠트모양
    opt["min"] = 0;         // y축 시작
    opt["max"] = 100;       // y축 끝
    opt["stepSize"] = 10;   // y측 간격

    opt["label"] = "3082 변환값";
    opt["labels"] = ['January','February','March','April','May','June', 'dd', 'ss'];
    opt["data"] = [50, 10, 5, 2, 20, 30, 45];
    opt["id"] = "myChart1";     // 챠트가 들어갈 canvas id
    const myChart1 = func_chart(opt);

    opt["id"] = "myChart2";     // 챠트가 들어갈 canvas id
    const myChart2 = func_chart(opt);

    opt["id"] = "myChart3";     // 챠트가 들어갈 canvas id
    const myChart3 = func_chart(opt);

    opt["id"] = "myChart4";     // 챠트가 들어갈 canvas id
    const myChart4 = func_chart(opt);

    opt["id"] = "myChart5";     // 챠트가 들어갈 canvas id
    const myChart5 = func_chart(opt);

    opt["id"] = "myChart6";     // 챠트가 들어갈 canvas id
    const myChart6 = func_chart(opt);

    opt["id"] = "myChart7";     // 챠트가 들어갈 canvas id
    const myChart7 = func_chart(opt);

    opt["id"] = "myChart8";     // 챠트가 들어갈 canvas id
    const myChart8 = func_chart(opt);

    opt["id"] = "myChart9";     // 챠트가 들어갈 canvas id
    const myChart9 = func_chart(opt);

    //======================================================================================
    function func_chart( opt ) {
        opt_data = {
            labels: opt["labels"],
            datasets: [{
                label: opt["label"],
                backgroundColor: opt["bgcolor"],
                borderColor: opt["border"],
                data:opt["data"],
            }],
        };

        opt_config = {
            type: opt["type"],
            data: opt_data,
            options: {
                scales: {
                    y: {
                        min: opt["min"],
                        max: opt["max"],
                        ticks: {
                            stepSize: opt["stepSize"]
                        }
                    }
                }
            }
        };

        var optChart = new Chart(
            document.getElementById(opt["id"]),
            opt_config
        );

        return optChart;
    }
   

//======================================================================================
    // 기존데이타 1개 삭제 후, 새로운 데이타 업데이트하기
    $("#btn_reload").click(function (e) {
        add_label = "추가레벨";
        add_value = 90;
        func_reload(myChart1, add_label, add_value);
    });

    $(document).ready(function (e) {
        setInterval(func_load, <?=$interval;?>);        // 1초마다 업데이트하기
    });
    
    function func_load() {
    $.post("load.json.php", {}, function (data) {
        var dataJson = $.parseJSON(data);

        func_reload(myChart1, dataJson["date"], dataJson["data_1"]);
    });
}

    function func_reload( c_id, c_label, c_value ) {
        // 데이타 추가
        dataCount = c_id.config.data.labels.length;     // 데이타 수 가져오기
        dataset = c_id.config.data.datasets;            // 데이터 셋 정보 가져오기
        datasetCount = dataset.length;                      // 데이타 셋 갯수

        //c_id.config.data.labels.push( "add-" + dataCount );       //라벨추가
        c_id.config.data.labels.push( c_label );       //라벨추가
        for(var i=0; i < datasetCount; i++){
            //dataset[i].data.push(Math.floor(Math.random() * 50));       //데이터셋의 데이터 추가
            dataset[i].data.push(c_value);   // 데이타 추가
        }
        c_id.update();      //차트 업데이트

        // 기존데이타 하나 삭제
        //myChart1.config.data.labels.splice(-1,1);                     // 마지막 라벨 삭제
        c_id.config.data.labels.splice(0,1);                        // 첫번째 라벨 삭제

        c_id.config.data.datasets.forEach(function(dataset) {       //데이터 삭제
            //dataset.data.pop();                                         // 마지막 데이타 삭제
            dataset.data.shift();                                       // 첫번째 데이타 삭제
        });

        c_id.update();      //차트 업데이트
    }

    //======================================================================================


    //======================================================================================
    //데이터 추가
    //console.log(myChart1.config);

    $("#btn_add").click(function (e) {
        dataCount = myChart1.config.data.labels.length;     // 데이타 수 가져오기

        dataset = myChart1.config.data.datasets;            // 데이터 셋 정보 가져오기
        datasetCount = dataset.length;                      // 데이타 셋 갯수
        
        myChart1.config.data.labels.push( "add-" + dataCount );       //라벨추가

        for(var i=0; i < datasetCount; i++){
            //dataset[i].data.push(Math.floor(Math.random() * 50));       //데이터셋의 데이터 추가
            dataset[i].data.push(70);
        }

        myChart1.update();    //차트 업데이트
    });
    //======================================================================================
    //======================================================================================
    //데이터 삭제
    $("#btn_del").click(function (e) {

        //myChart1.config.data.labels.splice(-1,1);                     // 마지막 라벨 삭제
        myChart1.config.data.labels.splice(0,1);                        // 첫번째 라벨 삭제

        myChart1.config.data.datasets.forEach(function(dataset) {       //데이터 삭제
            //dataset.data.pop();                                         // 마지막 데이타 삭제
            dataset.data.shift();                                       // 첫번째 데이타 삭제
        });
       
        myChart1.update();      //차트 업데이트
    });
    //======================================================================================
    //======================================================================================
    // 데이타 변경
    //$("#btn_edit").onclick = function(){
    $("#btn_edit").click(function (e) {
        var dataset = myChart1.config.data.datasets;                     //데이터셋 수 만큼 반복
        for(var i=0; i < dataset.length; i++){
            console.log(dataset);
            var data = dataset[i].data;                         //데이터 갯수 만큼 반복
            for(var j=0 ; j < data.length ; j++){
                data[j] = Math.floor(Math.random() * 50);
            }
        }

        myChart1.update();    //차트 업데이트
    });
    //======================================================================================


    //======================================================================================
    //데이터셋 추가
    $("#addDataSet").click(function (e) {
        var color1 = Math.floor(Math.random() * 256);
        var color2 = Math.floor(Math.random() * 256);
        var color3 = Math.floor(Math.random() * 256);

        console.log(color1 + " " + color2 + " " + color3)

        var newDataset = {
            label: 'new Dataset'+myChart1.config.data.datasets.length,
            borderColor : 'rgba('+color1+', '+color2+', '+color3+', 1)',
            backgroundColor : 'rgba('+color1+', '+color2+', '+color3+', 1)',
            data: [],
            fill: false
        }

        // newDataset에 데이터 삽입
        for (var i=0; i< myChart1.config.data.labels.length; i++){
            var num = Math.floor(Math.random() * 50);
            newDataset.data.push(num);
        }

        // chart에 newDataset 푸쉬
        myChart1.config.data.datasets.push(newDataset);

        myChart1.update();    //차트 업데이트
    });
    //======================================================================================
    //======================================================================================
    //데이터셋 삭제
    $("#delDataset").click(function (e) {
        myChart1.config.data.datasets.splice(-1,1);
        myChart1.update();    //차트 업데이트
    });
    //======================================================================================
    //======================================================================================
</script>