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

【问题标题】：Bootstrap modal not showing when click on pie chart slice单击饼图切片时不显示引导模式
【发布时间】：2019-10-07 04:56:24
【问题描述】：

<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"); 不起作用我不知道为什么。那么，如何在点击饼图的每一片后打开引导模式？请帮帮我。

谢谢

【问题讨论】：

您的代码中是否添加了引导 css 和 js 文件？
是的，我有@BhushanKawadkar
控制台有错误吗？
index:1296 Uncaught TypeError: $(...).modal is not a function at HTMLCanvasElement.canvas.onclick @BhushanKawadkar
这意味着 .modal 没有被识别，因为引导 css 或 js 没有正确链接。你能在 jsfiddle 或代码 sn-p 上重现这个，以便我看一下吗

标签： javascript php jquery bootstrap-modal pie-chart

【解决方案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">

【讨论】：