Googleビジュアライゼーションで.hide（）と.show（）を使用する

Google視覚化の線グラフを作成しました。私はそれをテストし、期待どおりに動作します。問題は、ビジュアライゼーションで.hide（）を使用してページを開始し、ボタンをクリックして表示すると、ビジュアライゼーションが表示されないことです。ここに私が持っているもののカットダウンバージョンです。 Googleビジュアライゼーションで.hide（）と.show（）を使用する

<script language="JavaScript"> 
    $(document).ready(function(){ 
     $('#visualization').hide(); 
     $('#show').click(function() { 
      $('#visualization').show(); 
     }); 
     $('#hide').click(function() { 
      $('#visualization').hide(); 
     }); 

    }); 
// Load the Visualization API and the piechart package. 
     google.load('visualization', '1.0', {'packages':['corechart','annotatedtimeline']}); 
// Begin Annoted Time Line Chart - 1 
     function drawVisualization() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('date', 'Date'); 
      data.addColumn('number', 'Number of Users'); 
      //data.addColumn('string', 'title1'); 
      data.addRows(10); 
data.setValue(0, 0, new Date(2011, 11 ,1)); 
      data.setValue(0, 1, 21); 
      data.setValue(1, 0, new Date(2011, 11 ,2)); 
      data.setValue(1, 1, 24); 
// Do this for the rest of the chart 

... 
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
       document.getElementById('visualization')); 
      annotatedtimeline.draw(data, {'displayAnnotations': true}); 
     } 

     google.setOnLoadCallback(drawVisualization); 

</script> 
<body> 
<a href="#" id="show">show</a> <a href="#" id="hide">hide</a> 
    <div style="border:solid"> 
       <div id="visualization" style="width: 100%; height: 400px;"></div> 
     </div> 
</body>

私は2つのボタンが表示する最初と非表示細かい作業で.hide（）が、その最初に隠されたとき、それは動作しませんをコメントアウトした場合。私は、クエリ部分の上に視覚化のためのコードを配置しようとしましたが、それはまだ動作しません。

誰でもこの問題を解決する方法を知っていますか？

私はこののsetTimeout（関数（）{ $（ '＃タブ'）を使用することができたおかげで、

クレイグ

EDIT

は、タブ（）; //または非表示（） }、50）; }）;

出典

2011-12-20 craigtb

私は特にこのコードのことは知らないが、それは隠されている、それはケースだとき、それは仕事だ行っていないときを検出するコードがあります。これは、効率の理由からしばしば行われます。そのため、オブジェクトが隠されていると、CPUやメモリが浪費されることはありません。その問題を回避するには、以前よりもむしろ見えるようにしてからレンダリングする必要があります。 – jfriend00

隠された要素でレンダリングされると、Gvizグラフが正しく表示されなくなります（多くの場合、極端に小さくなる/見えなくなる）。要素を表示させた後、グラフを再描画する必要があります。

これを行う簡単な例では、あなたのコードに基づいて、ショーハンドラのコールバックに自分のドロー機能を追加した線に沿って何かのようになります。

$('#visualization').show(function() { 
    drawVisualization(); 
});

コールバックがショー一度実行されます完了です。

出典

2011-12-22 07:57:19 oli

上記のOliによって提供されたアドバイスを試しましたが、再描画はChromeでうまくいかなかった。

私にとっては、グラフの高さと幅を固定数で定義する方が良い方法でした。 https://developers.google.com/chart/interactive/docs/gallery/bubblechartにオプションが記載されています。

私は単にこれを使用し、それが動作します：

var options = { 
     title: '<%= t("views.participants.ranking.s23") %>', 
     colors:['#3f3f3f', '#199EDA'], 
     chartArea: {top: 30, left: 80, width: 490, height: 300}, 
     height: 500, 
     width: 710, 
     legend: {position: 'right', alignment: 'start'}, 
     sizeAxis: {maxSize: 20} 
     }

出典

2013-03-31 14:58:57

Googleビジュアライゼーションで.hide（）と.show（）を使用する

答えて

関連する問題