twitter-bootstrap Google Charts 和 Twitter Bootstrap 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12956886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Charts and Twitter Bootstrap tabs
提问by mohitp
I am creating charts through Google Chart Tools, in a webpage using the Twitter Bootstrap framework. There are three types of charts shown - pie, line and column charts, each in individual tab. The chart data is received through Ajax.
我正在使用 Twitter Bootstrap 框架的网页中通过 Google Chart Tools 创建图表。显示了三种类型的图表 - 饼图、折线图和柱形图，每种都在单独的选项卡中。图表数据通过Ajax 接收。
Immediately on receiving the data through Ajax, the chart is displayed fine. But if i move to another tab, i.e., another chart, and return back to the first one, the labels in the chart get re-aligned incorrectly.
通过 Ajax 接收数据后，图表立即显示良好。但是如果我移动到另一个选项卡，即另一个图表，并返回到第一个，图表中的标签会重新对齐不正确。
Included herein are the images that show the problem, before and after tab change:
此处包括显示问题的图像，在选项卡更改之前和之后：
This problem occurs for the line and column charts too.
折线图和柱形图也会出现此问题。
But the problem does not occur if i change the window and then get back, or if i hide and then re-show the charts. It occurs only if i change the tabs.
但是，如果我更改窗口然后返回，或者如果我隐藏然后重新显示图表，则不会出现问题。只有当我更改选项卡时才会发生。
The mark-up for the tabs is like this:
标签的标记是这样的：
<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>
Checked in Chrome 22, IE9 and Firefox 12. The result is the same. There is no additional code/event programmed at my end for tab change or tab focus events.
在 Chrome 22、IE9 和 Firefox 12 中检查。结果是一样的。我最后没有为选项卡更改或选项卡焦点事件编写额外的代码/事件。
采纳答案by Noz
As mohitp has pointed out there are some downsides to davidkonrad's solution. If you still want the charts to remain functional after drawing them, (i.e., tooltips) then you'll have to use Javascript to re-draw the chart.
正如 mohitp 指出的那样，davidkonrad 的解决方案有一些缺点。如果您仍然希望图表在绘制后保持功能（即工具提示），那么您必须使用 Javascript 重新绘制图表。
Given David's example (minus the dummy displacement code) simply move the the chart variable with it's options & datatable intact to a global scope and call the draw method again, you can see an example of this in action here: redraw-google-chart
鉴于大卫的例子（减去虚拟位移代码）只需将图表变量及其选项和数据表完好无损地移动到全局范围并再次调用 draw 方法，您可以在此处看到一个示例：redraw-google-chart
With David's example, once you have your chart and charting information on a global scope you need to bind the following to the shown event of your tab as so:
使用 David 的示例，一旦您在全局范围内拥有图表和图表信息，您需要将以下内容绑定到选项卡的显示事件，如下所示：
$('a[data-toggle="tab"]').on('shown', function (e) {
chart.draw(data, options);
})
In my own application I draw my charts based on server-side json requests & there would be instances where I might have many charts on a single page so instead I appended my charts & charting information to global-scoped arrays that could be re-processed client-side as many times as needed.
在我自己的应用程序中，我根据服务器端 json 请求绘制图表，并且在某些情况下，我可能在单个页面上有多个图表，因此我将图表和图表信息附加到可以重新处理的全局范围数组中客户端根据需要多次。
回答by davidkonrad
Yes, that is very easy reproduceable (nix/various browsers) using your markup and the piechart example at https://google-developers.appspot.com/chart/interactive/docs/quick_start
是的，使用您的标记和https://google-developers.appspot.com/chart/interactive/docs/quick_start 上的饼图示例非常容易重现（nix/各种浏览器）
It seems that the API expands the middle center of the SVG when drawing text to hidden tabs. But I've found a workaround to this : draw the chart/line/bar to a dummy element and move them immediately to the tab container.
在将文本绘制到隐藏选项卡时，API 似乎扩展了 SVG 的中间中心。但我找到了一个解决方法：将图表/线条/条形图绘制到一个虚拟元素并立即将它们移动到选项卡容器。
altered chart example from above :
从上面改变的图表示例：
function drawChart(id) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 2],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
var chart = new google.visualization.PieChart(document.getElementById('dummy'));
chart.draw(data, options);
$('#dummy').children().remove().appendTo('#'+id);
}
somewhere in the code add
在代码的某处添加
<div id="dummy"></div>
draw the charts (via dummy to your .. class="chart xxx" id="xxx-prt")
绘制图表（通过虚拟到您的 .. class="chart xxx" id="xxx-prt"）
<script type="text/javascript">
$(document).ready(function() {
drawChart('pie-prt');
drawChart('line-prt');
drawChart('column-prt');
});
</script>
then the charts is rendered the same way on different tabs, here is a fiddle http://jsfiddle.net/sjW6Z/demonstrating that it actually works :)
然后图表在不同的选项卡上以相同的方式呈现，这是一个小提琴http://jsfiddle.net/sjW6Z/证明它确实有效:)
