我正在使用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.结果是一样的.在我的末尾没有编写额外的代码/事件来进行标签更改或标签焦点事件.
解决方法
正如mohitp所指出的那样,davidkonrad的解决方案存在一些缺点.如果您仍然希望图表在绘制后保持功能(即工具提示),那么您将不得不使用Javascript重新绘制图表.
鉴于大卫的例子(减去虚位移代码),只需将图表变量与其选项&数据表完整地保存到全局范围并再次调用draw方法,您可以在此处看到此示例：redraw-google-chart
使用David的示例,一旦在全局范围内获得了图表和图表信息,就需要将以下内容绑定到选项卡的显示事件,如下所示：
$('a[data-toggle="tab"]').on('shown',function (e) {
chart.draw(data,options);
})
在我自己的应用程序中,我根据服务器端json请求绘制我的图表&有些情况下我可能在一个页面上有很多图表,所以我添加了我的图表和图表.将信息绘制到全局范围的数组,可以根据需要多次重新处理客户端.