chartjs_onclick_function_modal - pai-plznw4me/django-initializer GitHub Wiki

Chart.js์— options onClick ์„ค์ • ๋ฐฉ๋ฒ•

์‚ฌ์ „์ค€๋น„

  • views.py ํ•จ์ˆ˜ ๋ฐ urls.py ๋“ฑ

    def onclick_plot(request):
    return render(request, template_name='chartjs/onclick_plot.html')

  • html

    {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
<h1> onclick plot Chart </h1>
<div style=" border: solid 5px;">
    <canvas id="onclick_plot"></canvas>
</div>
{# jquery #}
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
        crossorigin="anonymous"></script>
{# chartjs  #}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src='{% static 'chartjs/js/onclick_plot.js' %}'></script>
<script> onclick_plot("#onclick_plot")</script>
{# bootstrap  #}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

  • js

    function onclick_plot(elementId) {
    var ys = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
    var xs1 = [12, 19, 3, 5, 10, 3]
    var xs2 = [9, 19, 32, 1, -3, 3]
    const data = {
        labels: ys,
        datasets:
            [{
                "label": 'My First dataset',
                "backgroundColor": 'rgb(255, 99, 132)',
                "borderColor": 'rgb(255, 99, 132)',
                "data": xs1
            },

                {
                    "label": 'My Second dataset',
                    "backgroundColor": 'rgb(255, 255, 132)',
                    "borderColor": 'rgb(255, 255, 132)',
                    "data": xs2
                }]
    };

    const config = {
        type: 'line',
        data: data,
        options: {}
    };
    //create chart
    return new Chart($(elementId), config)
}

โ€‹

onclick options ์ถ”๊ฐ€

function onclick_plot(elementId) {
  ...
    const config = {
        type: 'line',
        data: data,
        options: {
            onClick: onclickFunction
        }
    };
    //create chart
    var myChart = new Chart($(elementId), config)
    return myChart

    function onclickFunction(event, elements) {
        console.log(`myChart.data:`)
        console.log(myChart.data)
        console.log(`elements:`)
        console.log(elements)
    }
}

>>> ์ฝ˜์†” ๋กœ๊ทธ ํ™•์ธ

image

myChart : ์ƒ์„ฑ๋œ ์ฐจํŠธ์˜ ๋ฐ์ดํ„ฐ

elements : ๋งˆ์šฐ์Šค ํฌ์ธํ„ฐ๊ฐ€ ํด๋ฆญํ•œ ์š”์†Œ

ํด๋ฆญํ•œ ์š”์†Œ์˜ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ

function onclick_plot(elementId) {
  ...
    function onclickFunction(event, elements) {
        if (elements.length > 0) {
            var clickedElement = elements[0];
            var datasetIndex = clickedElement.datasetIndex;
            var index = clickedElement.index;
            var data_x = myChart.data.datasets[datasetIndex].data[index];
            console.log(data_x)
        }
    }
}

>>> ํด๋ฆญํ•œ point์˜ data๊ฐ’

onClick ํ•จ์ˆ˜๋กœ modal ์ฐฝ ๋„์šฐ๊ธฐ

function onclick_plot(elementId) {
  ...
    function onclickFunction(event, elements) {
        if (elements.length > 0) {
            $('#myModal').modal('show');

            // ์ทจ์†Œ๋ฒ„ํŠผ
            $('#closeBtn').click(function () {
                $('#myModal').modal('hide');
            });

            // ๋‹ค์šด๋กœ๋“œ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋ชจ๋ธ ๋‹ค์šด๋กœ๋“œ
            $('#btn1').click(function () {
                // btn1ClickFunction(elements)
                $('#myModal').modal('hide');
            });

            // ๋“ฑ๋ก ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋ชจ๋ธ ๋“ฑ๋ก
            $('#btn2').click(function () {
                // btn2ClickFunction(elements)
                $('#myModal').modal('hide');
            });

            // modal์ฐฝ์—์„œ ๋™์ž‘ ํ›„ ์ดํ›„ ๋™์ž‘์— ์˜ํ–ฅ์„ ๋ผ์น˜์ง€ ์•Š๋„๋ก ์ดˆ๊ธฐํ™”
            $('#myModal').on('hidden.bs.modal', function () {
                $('#closeBtn').off('click');
                $('#btn1').off('click');
                $('#btn2').off('click');
            });
        }
    }
}

html์— modal ์ฐฝ ์ถ”๊ฐ€

...
<body>
...

<!-- modal -->
<div class="modal" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div id="choiceAction" class="modal-header">
                <h4 class="modal-title">Choose an action</h4>
                <h5 class="modal-title"></h5>
                <button id="closeBtn" type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body d-flex justify-content-between">
                <button id="btn1" class="btn btn-primary mr-2">BTN1</button>
                <button id="btn2" class="btn btn-primary">BTN2</button>
            </div>
        </div>
    </div>
</div>

...
</body>
...

>>> javascript ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด html ๋™์ž‘์„ ์ œ์–ด

image
โš ๏ธ **GitHub.com Fallback** โš ๏ธ