4

これは一般的な問題のように思えるかもしれませんが、この特定の問題の解決策を見つけることができませんでした..

GOOGLE CHARTING API を使用して 2 つの円グラフを作成しようとしています。

1 番目のタブ (デフォルトで選択) にある 1 番目の円グラフは正確な幅と高さを示していますが、非表示のタブの 2 番目の円グラフは適切な幅を示していません。

これがフィドルです...

Fiddle では、両方のチャートのコードは同じですが、非表示のタブのチャート エリアがアクティブなタブのチャート エリアよりも小さいことがわかります...

google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() 

{

var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

 var options = {
      title: 'My Daily Activities',
  backgroundColor: '#ddd',
  chartArea: {width:500,height:200}
    };

var chart = new      google.visualization.PieChart(document.getElementById('chart'));


chart.draw(data, options);

var chart1= new      google.visualization.PieChart(document.getElementById('chart1'));


chart1.draw(data, options);
}

ここでできればフィドルを更新してください..

4

4 に答える 4

3

私はあなたに半分の答えを持っています。何が起こっているか、回避策が見えますが、なぜそれが起こっているのかはまだわかりません...

.draw を呼び出すと、vis API は、描画されるコンテナーの寸法に基づいて「最適」を計算しようとします。

あなたの問題は、コンテナのdivが異なるサイズで始まることです

変化する

#content_2, #content_3 { display:none; }

に

#content_2, #content_3 { display:block; }

見る...

この問題を解決する回避策は、クリック イベントを発生させてタブ ボックス内の div を「初期化」してから、

$(".tabs a[title='content_2']").click()
$(".tabs a[title='content_1']").click()

フィドルでは見栄えが悪いですが、表示オプションをいじることで整理できます

これがデモとしてのフィドルです

それが役立つことを願っています

于 2013-05-09T05:21:06.920 に答える
0

「描画」を呼び出す前にDIVを表示し、その後すぐに再び非表示にすることができます。例えば

//make div visible
chart.draw();
//make div hidden
于 2015-02-11T08:13:36.160 に答える