Google图表和Twitter Bootstrap选项卡

Question

我正在使用Twitter Bootstrap框架在网页中通过Google Chart工具创建图表。显示了三种类型的图表-饼图、折线图和柱状图，每种图表都在单独的选项卡中。图表数据是通过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>

在Chrome22，IE9和Firefox12中检查，结果是一样的。在我这一端没有为选项卡更改或选项卡焦点事件编写额外的代码/事件。

Answer 1

正如mohitp所指出的，davidkonrad的解决方案也有一些缺点。如果您仍然希望图表在绘制后仍然有效(例如，工具提示)，那么您将不得不使用Javascript重新绘制图表。

给定David的示例(减去虚拟位移代码)，只需将chart变量移动到一个全局作用域，并再次调用draw方法，您可以在这里看到一个实际的示例：redraw-google-chart

以David为例，一旦有了全局作用域上的图表和图表信息，就需要将以下内容绑定到选项卡的显示事件：

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

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

Answer 2

是的，这是非常容易重现的(nix/各种浏览器)，使用您的标记和https://google-developers.appspot.com/chart/interactive/docs/quick_start中的片段图示例

在将文本绘制到隐藏选项卡时，API似乎扩展了SVG的中间中心。但我找到了一个解决方法:将图表/线/条形图绘制到一个虚拟元素，然后立即将它们移动到选项卡容器中。

修改了上面的图表示例：

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);
  }

在代码添加中的某处

<div id="dummy"></div>

绘制图表(通过虚拟到您的..class="chart xxx" id="xxx-prt" )

<script type="text/javascript">
$(document).ready(function() {
    drawChart('pie-prt');
    drawChart('line-prt');
    drawChart('column-prt');
});
</script>

然后图表在不同的选项卡上以相同的方式呈现，这是一个演示它实际工作的fiddle http://jsfiddle.net/sjW6Z/ :)