Google 图表在 Bootstrap 模式内显示时显示对齐错误

Question

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

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: 这是bootstrap模态的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);

    })

现在可以正常使用了

Google 图表在 Bootstrap 模式内显示时显示对齐错误

Google Charts Showing error in alignment when displayed inside a Bootstrap Modal

html

javascript

charts

google-visualization

bootstrap-modal