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的示例,一旦在全局范围内获得了图表和图表信息,就需要将以下内容绑定到选项卡的显示事件,如下所示:

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

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