Morris.js图表无法在Bootstrap模态框中占满宽度的问题求助

问题场景 #

我的Bootstrap模态框元素ID为kurva_s，模态框体代码如下：

<div class="modal-body">
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div id="line-chart" style="height: 300px;width:700px;">
            </div>
          </div>
        </div>
      </div>

对应的JS代码：

$('#kurva_s').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var id_spk = button.data('whatever');

    $(function () {
      $('#line-chart').empty();

      var data = [
        {"m":"2022-01-15","r":0,"p":13.33},
        {"m":"2022-01-22","r":10,"p":60},
        {"m":"2022-01-29","r":15,"p":100},
        {"m":"2022-02-05","r":35,"p":100},
        {"m":"2022-02-12","r":50,"p":100},
        {"m":"2022-02-19","r":55,"p":100}
      ];
      
      var chart = Morris.Line({
            element: 'line-chart',
            data: data,
            xkey: 'm',
            ykeys: ['r','p'],
            labels: ['Real','Plan'],
            stacked: true,
            barGap:10,
            barSizeRatio:1,
        });
    });
  });

尽管手动设置了容器宽度，Morris.js图表仍无法占满模态框宽度。

核心原因 #

Morris.js初始化时会读取容器的当前可见宽度，而show.bs.modal事件触发时，模态框还处于渲染过程中并未完全显示，导致容器宽度计算不准确，最终图表宽度偏小。

解决方法 #

1. 切换到shown.bs.modal事件触发 #

将事件从show.bs.modal改为shown.bs.modal，该事件在模态框完全显示后触发，此时容器的真实宽度已确定：

$('#kurva_s').on('shown.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var id_spk = button.data('whatever');

    $('#line-chart').empty();

    var data = [
      {"m":"2022-01-15","r":0,"p":13.33},
      {"m":"2022-01-22","r":10,"p":60},
      {"m":"2022-01-29","r":15,"p":100},
      {"m":"2022-02-05","r":35,"p":100},
      {"m":"2022-02-12","r":50,"p":100},
      {"m":"2022-02-19","r":55,"p":100}
    ];
    
    var chart = Morris.Line({
          element: 'line-chart',
          data: data,
          xkey: 'm',
          ykeys: ['r','p'],
          labels: ['Real','Plan'],
          stacked: true,
          barGap:10,
          barSizeRatio:1,
      });
});

注意：移除内部嵌套的$(function () {})，因为shown.bs.modal事件本身就在DOM加载完成后触发，无需额外包裹DOM就绪函数。

2. 改用相对宽度适配模态框 #

把容器的固定宽度width:700px替换为width:100%，让容器自动适配模态框的宽度，避免固定宽度在不同屏幕尺寸下的适配问题：

<div id="line-chart" style="height: 300px;width:100%;">
</div>

3. 强制图表重绘（可选） #

如果前两步仍未解决问题，可在图表初始化后调用redraw()方法，强制图表重新计算并适配容器宽度：

chart.redraw();

内容的提问来源于stack exchange，提问作者Mss