Question

我在模态主体内部有bootstrap 4模态，并试图显示包含条形图的。下面是代码

<!-- Modal body -->
    <div class="modal-body">
   Modal body..
   <!--Markup to display graph-->
   <div id="chart1" style="margin-top: 20px; margin-left: 20px; width: 300px; height: 300px;"></div>              
   </div

当我将“ chart1”保留在Modal主体之外时，我可以看到显示的图表，而当其在Modal主体内部时却没有发生。单击下面的按钮将显示模态

<button type="submit" class="btn btn-primary mb-2" style=" margin-left:30px;  margin-top:20px; display:none" id="analyzeAndPredict" data-toggle="modal" data-target="#graphicalModal" onclick="BarChartAjax('2, 4, 5, 6', ['a', 'b', 'c', 'd'])">Analyze & Predict</button>

上面的代码有什么问题？

试图在小提琴中添加代码 http://jsfiddle.net/r2sd5b0y/

Answer 1

我已从按钮中移除了onClick，并在JS中BarChartAjax上调用了shown.bs.modal

$('#graphicalModal').on('shown.bs.modal', function () {
   BarChartAjax('2, 4, 5, 6', ['a', 'b', 'c', 'd']);
})

模态打开时在此处显示图表，但我认为传递给BarChartAjax函数的数组存在一些问题，因此该图表无法正确显示，因此请检查传递给函数的值

function DisplayBarChart(data) {
    //debugger;
    var array = data.split("-");
    var s1 = array[0].split(',').map(function (el) { return +el; });
    var ticks = array[1].split(',');
    $.jqplot.config.enablePlugins = true;
    console.log(s1);
    plot1 = $.jqplot('chart1', [s1], {
        // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
        animate: !$.jqplot.use_excanvas,
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            pointLabels: { show: true }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            }
        },
        highlighter: { show: false }
    });

    $('#chart1').bind('jqplotDataClick',
        function (ev, seriesIndex, pointIndex, data) {
            $('#info1').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
        }
    );
}

function BarChartAjax(xdata, ydata) {
    var dataToSend = JSON.stringify({ 'GraphData': xdata + "-" + ydata });
    DisplayBarChart(dataToSend);
}

$('#graphicalModal').on('shown.bs.modal', function () {
  BarChartAjax('2, 4, 5, 6', ['a', 'b', 'c', 'd']);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pointLabels.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
  
  <button type="submit" class="btn btn-primary mb-2" style=" margin-left:30px;  margin-top:20px;" id="analyzeAndPredict" data-toggle="modal" data-target="#graphicalModal" >Analyze & Predict</button> 
 
 
 <div class="modal fade" id="graphicalModal">
                  <div class="modal-dialog">
                  <div class="modal-content">
      
                   <!-- Modal Header -->
                  <div class="modal-header">
                  <h4 class="modal-title">Modal Heading</h4>
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>      
                 <!-- Modal body -->
                 <div class="modal-body" id="graphicalModalBody">
                 Modal body..
                    <div id="chart1" style=" margin-top: 20px; margin-left: 20px; width: 300px; height: 300px;"></div>    
                 </div>
        
                <!-- Modal footer -->
                 <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                 </div>
                      </div>
    </div>
  </div>

无法在引导程序模式

1 个答案: