Google ChartsとTwitter Bootstrapタブ

Question

Twitter Bootstrapフレームワークを使用してウェブページでGoogle Chart Toolsを使用してチャートを作成しています。円グラフ、線グラフ、縦棒グラフの3つのタイプがあり、それぞれ個別のタブに表示されます。チャートデータは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を使用してチャートを再描画する必要があります。ダビデの例（マイナスダミー変位コード）を考えると

は、単にそれがグローバルスコープにそのまま& DataTableのオプションだと、再びドローメソッドを呼び出すと、あなたはここでこの動作の例を見ることができるグラフの変数を移動：redraw-google-chart

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

自分のアプリケーションには、私は私のグラフを描く：あなたはグローバルスコープにチャートやグラフ作成の情報を持っていたら、ダビデの例では

は、あなたにそうあなたのタブの示すイベントに次のバインドする必要がありますサーバー側のjson要求に基づいて&私は単一のページに多くのチャートがあるかもしれない場合があるので、チャート番号&をグローバルスコープのアレイに追加しました。これは、クライアント側で必要なだけ何度も再処理することができます。

Answer 2

はい、それは隠されたタブにテキストを描画するときにAPIは、SVGの真ん中センターを展開しているようですhttps://google-developers.appspot.com/chart/interactive/docs/quick_start

であなたのマークアップと円グラフの例を使用して非常に簡単に再現可能（NIX /さまざまなブラウザ）です。しかし、私はこれを回避する方法を見つけました。ダミー要素にチャート/線/バーを描画し、すぐにタブコンテナに移動します。

上記から変更されたチャートの例：どこかのコードで

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

が

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

（あなた.. class="chart xxx" id="xxx-prt"にダミー経由）

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

がチャートを描画追加しチャートは別のタブで同じ方法でレンダリングされ、ここではフィドルですは実際に動作することを実証しています:)