javascript - Google Charts 在 Bootstrap Modal 中显示时显示对齐错误

Question

当我尝试在 Bootstrap 模式上显示图形/图表时。它显示对齐错误。当它放在模态之外时它工作正常。查看以下代码:

Javascript:这是用于绘制图表的代码。

google.load("visualization", "1.1", {packages:["bar"]});

google.setOnLoadCallback(drawStuff);

function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Month', 'Absent'],
          ['A', 2],
          ['B', 3],
          ['C', 4],
          ['D', 3],
          ['E', 6]
        ]);

        var options = {
          chartArea: {width: 50},

          legend: { position: 'none' },

          axes: {
            x: {
              0: { side: 'top'} // Top x-axis.
            }
          },
          bar: { groupWidth: '90%' }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
};

HTML: 这是引导模式的 html 代码。这里的 div“top_x_div”是图表持有者。

<div class="modal fade" id="showGraph" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Graph</h4>
          </div>
              <div class="modal-body">

                  <div id="top_x_div" ></div>


              </div>
              <div class="modal-footer">

              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

              </div>

      </div>
  </div>

截图如下:

在这里，分配的值为 A:2,B:3,C:4,D:3,E:6但这里的图与错误对齐，从点 4 开始，标签 A、B、C... 与图重叠。

Answer 1

我得到了答案。我只是在延迟几秒钟后在模式显示事件中调用了 drawStuff()。代码如下:

$('#showGraph').on('show.bs.modal', function(e) {

        setTimeout(
        function() 
        {
          drawStuff();
        }, 500);

    })

现在一切正常