twitter-bootstrap - Google Charts 和 Twitter Bootstrap 选项卡

Question

我正在使用 Twitter Bootstrap 框架的网页中通过 Google Chart Tools 创建图表。显示了三种类型的图表 - 饼图、折线图和柱形图，每种都在单独的选项卡中。图表数据通过 Ajax 接收。

通过 Ajax 接收数据后，图表立即显示良好。但是，如果我移动到另一个选项卡，即另一个图表，然后返回到第一个选项卡，图表中的标签会错误地重新对齐。

此处包括显示问题的图像，在选项卡更改之前和之后:



折线图和柱形图也会出现此问题。

但是，如果我更改窗口然后返回，或者如果我隐藏然后重新显示图表，则不会出现问题。仅当我更改选项卡时才会发生。

选项卡的标记如下:

    <div class="charts-div" style="text-align: center">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-pie" data-toggle="tab">Pie</a></li>
                <li><a href="#tab-line" data-toggle="tab">Line</a></li>
                <li><a href="#tab-column" data-toggle="tab">Columns</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-pie">
                    <div class="chart pie-chart" id="pie-prt"></div>
                </div>
                <div class="tab-pane" id="tab-line">
                    <div class="chart line-chart" id="line-prt"></div>
                </div>
                <div class="tab-pane" id="tab-column">
                    <div class="chart column-chart" id="column-prt"></div>
                </div>
            </div>

    </div>

在 Chrome 22、IE9 和 Firefox 12 中检查。结果是一样的。我没有为选项卡更改或选项卡焦点事件编程额外的代码/事件。

Answer 1

正如 mohitp 所指出的，davidkonrad 的解决方案存在一些缺点。如果您仍然希望图表在绘制后仍能正常工作(即工具提示)，那么您必须使用 Javascript 重新绘制图表。

鉴于 David 的示例(减去虚拟位移代码)，只需将带有选项和数据表的图表变量完整地移动到全局范围并再次调用 draw 方法，您可以在此处查看此示例:redraw-google-chart

以 David 的示例为例，一旦您在全局范围内获得图表和图表信息，您需要将以下内容绑定(bind)到选项卡的显示事件，如下所示:

$('a[data-toggle="tab"]').on('shown', function (e) {
    chart.draw(data, options);
  })

在我自己的应用程序中，我根据服务器端 json 请求绘制图表，并且在某些情况下，我可能在单个页面上有许多图表，因此我将图表和图表信息附加到可以重新处理的全局范围数组中客户端根据需要多次。