8

Twitter Bootstrapフレームワークを使用したWebページで、GoogleChartToolsを使用してグラフを作成しています。表示されるグラフには、円グラフ、線グラフ、縦棒グラフの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>

Chrome 22、IE9、Firefox12でチェックイン。結果は同じです。タブ変更またはタブフォーカスイベント用にプログラムされた追加のコード/イベントはありません。

4

2 に答える 2

7

mohitpが指摘しているように、davidkonradのソリューションにはいくつかの欠点があります。グラフを描画した後も機能を維持したい場合（つまり、ツールチップ）、Javascriptを使用してグラフを再描画する必要があります。

Davidの例（ダミーの変位コードを除く）を考えると、オプションとデータテーブルをそのままにしてグラフ変数をグローバルスコープに移動し、drawメソッドを再度呼び出すだけで、この動作の例をここで確認できます：redraw-google-chart

Davidの例では、グローバルスコープに関するグラフとグラフ情報を取得したら、タブの表示されたイベントに次のようにバインドする必要があります。

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

私自身のアプリケーションでは、サーバー側のjsonリクエストに基づいてグラフを描画します。単一のページに多数のグラフが含まれる場合があるため、代わりに、再処理可能なグローバルスコープの配列にグラフとグラフ情報を追加しました。クライアント側は必要な回数だけ。

于 2012-11-08T19:31:32.147 に答える
1

はい、それはマークアップとhttps://google-developers.appspot.com/chart/interactive/docs/quick_startの円グラフの例を使用して非常に簡単に再現できます（nix /さまざまなブラウザ）

非表示のタブにテキストを描画するときに、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/です:)

于 2012-10-30T10:53:19.480 に答える