Модал начальной загрузки не отображается при нажатии на круговую диаграмму - PullRequest
Новая
       32

Модал начальной загрузки не отображается при нажатии на круговую диаграмму

0 голосов
/ 07 октября 2019 
<script>
    $(document).ready(function(){
        //get the pie chart canvas
        var cData = JSON.parse(`<?php echo $chart_data; ?>`);
        var data = {
            // labels: cData.label,
            datasets: [{
                label: "Users Count",
                data: cData.data,
                backgroundColor: [
                    "#FF0000",
                    "#FFFF00",
                    "#008000",
                ],
                borderColor: [
                    "#FF0000",
                    "#FFFF00",
                    "#008000",
                ],
                borderWidth: [1, 1, 1]
            }]
        };

        var options = {
            responsive: true,
            title: {
                display: true,
                position: "top",
                text: "All Subject Progress",
                fontSize: 18,
                fontColor: "#111"
            },
            legend: {
                display: true,
                position: "bottom"
                // labels: {
                //   fontColor: "#333",
                //   fontSize: 16
                // }
            }
        };

        var canvas = document.getElementById("pie-chart");
        var ctx = canvas.getContext("2d");
        var myNewChart = new Chart(ctx, {
            type: 'pie',
            data: data
        });

        canvas.onclick = function(evt) {
            var activePoints = myNewChart.getElementsAtEvent(evt);
            if (activePoints[0]) {
                var chartData = activePoints[0]['_chart'].config.data;
                var idx = activePoints[0]['_index'];

                var label = chartData.labels[idx];
                var value = chartData.datasets[0].data[idx];

                var url = "http://example.com/?label=" + label + "&value=" + value;
                //console.log(url);
                //alert(url);
                $("#myChartmodal").modal("show");
            }
        };

    });
</script>

<div id="myChartmodal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

В этом коде я создаю круговую диаграмму, где она отлично работает. Теперь я хочу показать модальный бутстрап, когда я canvas.onclick. Вот что происходит, когда я нажимаю на canvas.onclick, только сейчас отображается предупреждение, но $("#myChartmodal").modal("show"); не работает, я не знаю почему. Итак, как я могу открыть мод начальной загрузки после нажатия на каждый кусок круговой диаграммы? Пожалуйста, помогите мне.

Спасибо

1 Ответ

1 голос
/ 07 октября 2019

Ваш модальный код шоу должен работать, как показано ниже, просто необходимо включить библиотеки начальной загрузки, как показано ниже 

$(function(){
 $('show').on('click', function(){
      $('#myChartmodal').modal('show');
  });
});
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="myChartmodal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<input type="button" value="Show Popup" id="show" data-toggle="modal" data-target="#myChartmodal">
...