Bootstrap 模态 + Morris.js 图表

Question

我在让 morris.js 图表正确显示在引导模式中时遇到了一些问题。不仅尺寸缩小，而且图表不绘制。我已经四处搜索，到目前为止找不到适合我的解决方案。有人可以帮忙吗？

编辑：解决了大小问题，但仍未绘制图表。谢谢！

模态标记：

<div class="modal fade" id="clusterpulse" tabindex="-1" role="dialog" aria-labelledby="clusterpulse" aria-hidden="true">
   <div class="modal-dialog">
   <div class="modal-content">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
     <h4 class="modal-title" id="myModalLabel">Pulse</h4>
   </div>
   <div class="modal-body">
   <div class="col-lg-4">
   <div class="panel panel-primary">
   <div class="panel-heading">
     <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i>Versions by Environment</h3>
   </div>
   <div class="panel-body">
   <div id="morris-chart-versions"></div>

   </div><!-- /.panel-body -->
   </div><!-- /.panel-primary -->
   </div><!-- /.col-lg-4 -->
   </div><!-- /.modal-body -->
   </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div> <!-- /.modal -->

JS：

<script>

        $(function () {

            // Create a Bar Chart with Morris
            var chart = Morris.Bar({
                element: 'morris-chart-versions',
                data: [0, 0], // Set initial data (ideally you would provide an array of default data)
                xkey: 'd', // Set the key for X-axis
                ykeys: ['test1','test2','test3'], // Set the key for Y-axis
                labels: ['test1','test2','test3'], // Set the label when bar is rolled over
                resize: true
                stacked: true

            });

            // Fire off an AJAX request to load the data
            $.ajax({
                type: "GET",
                dataType: 'json',
                url: "../scripts/all_versions.php", // This is the URL to the API

            })
                .done(function (data) {
                    // When the response to the AJAX request comes back render the chart with new data
                    chart.setData(data);
                })
                .fail(function () {
                    // If there is no communication between the server, show an error
                    alert("error occured");
                });
        });
</script>

这就是它最终的样子：

编辑：我发现了尺寸问题。这是我标记中的“col-lg-4”。从主页上的另一个图表中将其留在那里。现在看起来像这样：

Edit2：当我从 js 中删除 'resize: true' 时。

Answer 1

这是最终让我将图表放入模态并在单击时重绘的 js。

<script>
$('#clusterpulse').on('shown.bs.modal', function () { //listen for user to open modal
    $(function () {
    $( "#morris-chart-versions" ).empty(); //clear chart so it doesn't create multiple if multiple clicks
        // Create a Bar Chart with Morris
        var chart = Morris.Bar({
            element: 'morris-chart-versions',
            data: [0, 0], // Set initial data (ideally you would provide an array of default data)
            xkey: 'd', // Set the key for X-axis
            ykeys: ['test1','test2','test3'], // Set the key for Y-axis
            labels: ['test1','test2','test3'], // Set the label when bar is rolled over
            stacked: true
        });

        // Fire off an AJAX request to load the data
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: "../scripts/all_versions.php", // This is the URL to the API

        })
            .done(function (data) {
                // When the response to the AJAX request comes back render the chart with new data
                chart.setData(data);
            })
            .fail(function () {
                // If there is no communication between the server, show an error
                alert("error occured");
           });
        });
        });
</script>

Answer 2

我看到了你的问题。这是图表无法理解的数据格式。

这是我使用过的一个例子：

  var data = [];
  var mult = 200;
  for(var i = 0; i < 40; i++){
             data.push({y: 1300+(i*mult), value: 30*i});
  }

这是我的图表参数

  Morris.Line({
       // ID of the element in which to draw the chart.
       element: 'linechart',
       // Chart data records -- each entry in this array corresponds to a point on
       // the chart.
       data: data,
       // The name of the data record attribute that contains x-visitss.
       xkey: 'y',
       // A list of names of data record attributes that contain y-visitss.
       ykeys: ['value'],
       // Labels for the ykeys -- will be displayed when you hover over the
       // chart.
       labels: ['y'],
       // Disables line smoothing
       smooth: false,
           parseTime: false,
     });

我在标签上重绘做了什么，因为重绘似乎不起作用：

   $('ul.nav a').on('shown.bs.tab', function(e){
    // this ain't pretty, but you should get the idea
    if ($(e.target).attr('href') == '#AMD' && $('#line2').html().length == 0) {
     Morris.Area({       
       element: 'line2',
       data: chartdata,    
       xkey: 'd',
       ykeys: ['visits'],
       labels: ['USD'],
       // Disables line smoothing
       smooth: false,
     });
        $(document).scrollTop( $("#myTab").offset().top );
    }
    if ($(e.target).attr('href') == '#TTWO' && $('#line3').html().length == 0) {
     Morris.Area({
       element: 'line3', 
       data: data,
       xkey: 'd',
       ykeys: ['visits'],
       labels: ['USD'],
       smooth: false,
     });
        $(document).scrollTop( $("#myTab").offset().top );
    }
});

这是旧版本的代码，但您应该明白这一点。 这里的关键部分是：

    $('ul.nav a').on('shown.bs.tab', function(e){
       if ($(e.target).attr('href') == 

我认为可以应用于模态

Answer 3

您可以延迟图形的绘制。以下方法给了我解决方案。

setTimeout( function(){
     Morris.Area({...})
  },1200);

您可以根据您的图表和数据集更改1200。