Javascript Google图表显示在引导模式中显示对齐错误

当我试图在引导模式上显示图形/图表时。它显示对齐错误。当它被放置在模态外部时，它可以正常工作。查看以下代码：

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开始。。。与图表重叠。

我得到了答案。在模态显示事件中，我只是在延迟几秒钟后调用了drawStuff（）。代码如下：

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

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

    })

现在它可以正常工作了