单击饼图切片时不显示引导模式

Question

<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");无法正常工作时，我不知道为什么会发生什么。那么，单击每个切片图后如何打开引导程序模态？请帮助我。

谢谢

Answer 1

您的显示模式代码应如下所示工作，只需要包含如下所示的引导程序库

$(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">

您已经在html中添加了fade类，请删除该类并仅保留modal类，它应该可以工作。

<div id="myChartmodal" class="modal" 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>