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> 

经过在铬22，IE9和Firefox 12.结果是相同的。在我的结尾处没有为选项卡更改或选项卡焦点事件编写额外的代码/事件。

Answer 1

正如mohitp指出的，davidkonrad的解决方案有一些缺点。如果您仍然希望图表在绘制之后保持功能（即工具提示），那么您将不得不使用Javascript重新绘制图表。

由于大卫的例子（减去虚位移代码）只需要移动图表变量与它的选项&数据表完整的全球范围内，并再次调用draw方法，你可以在行动中看到这样的例子在这里：redraw-google-chart

随着大卫的例子，一旦你有你的图表和图表信息在全球范围内，你需要绑定以下到您的标签的显示事件像这样：

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

在我自己的应用程序，我画我的图表基于服务器端的json请求&会有这样的情况，我可能在单个页面上有很多图表，因此我将图表&图表信息附加到全局范围的数组，可以根据需要多次重新处理客户端。

Answer 2

没错，就是用你的标记和饼图例子很容易reproduceable（尼克斯/各种浏览器）在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> 

则图表在不同的选项卡上呈现相同的方式，这里是一个小提琴http://jsfiddle.net/sjW6Z/证明它实际上有效:)