4

divgoogle.visualization.AnnotatedTimeLineにaを描画する必要があります。<div id="visualization" style="width: 800px; height: 400px; display: none;"></div>Googleは、divの幅と高さを使用して、視覚化のサイズを決定します。残念ながら、私はディスプレイに描画しているため、Googleは幅または高さを取得できません。divであるため、エラーが発生します：コンテナの幅がゼロです。有効な幅が必要です。エラー。

私が考えることができる唯一のことは、ディスプレイに描画することです。divとTHENはdivを非表示にしますが、グラフが一瞬表示されるため、これを行うと少し奇妙に見えます。他に選択肢はありますか？

再現するサンプルコード：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['annotatedtimeline']});
    function drawVisualization() {
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Sold Pencils');
      data.addColumn('string', 'title1');
      data.addColumn('string', 'text1');
      data.addColumn('number', 'Sold Pens');
      data.addColumn('string', 'title2');
      data.addColumn('string', 'text2');
      data.addRows([
        [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
        [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
        [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
        [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
        [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null],
        [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
      ]);

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

    google.setOnLoadCallback(drawVisualization);
  </script>
</head>
<body style="font-family: Arial; border: 0 none;">
  <div id="visualization" style="width: 800px; height: 400px; display: none;"></div>
  <input type="button" onclick="toggle();" value="Toggle Visualization">
  <script language="javascript">  
    function toggle() {   
      var ele = document.getElementById('visualization'); 
      if(ele.style.display == "block") {
        ele.style.display = "none";
      } else {
        ele.style.display = "block";
      } 
    }  
  </script> 
</body>
</html>

参照：

https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline

http://code.google.com/apis/ajax/playground/?type=visualization

4

4 に答える 4

3

jQueryUIページで答えに出くわしました。

タブパネル自体が表示によって非表示になっているため、初期化に何らかの寸法計算が必要なコンポーネントは非表示のタブでは機能しません。内部の要素が実際の幅と高さを報告しないようにするためです（ほとんどのブラウザでは0）。 。

簡単な回避策があります。の代わりに、非アクティブなタブパネルを非表示にするために左オフの手法を使用しますdisplay: none;。

于 2012-09-07T16:49:30.940 に答える
2

同じ問題があり、幅と高さに単位を追加することで修正できました。

<div id="visualization" style="width: 800px; height: 400px; display: none;"></div>
于 2012-11-05T13:08:38.710 に答える
1

@Jonのソリューションは機能しますが、別の方法を試しました。私の解決策は次のようなものです：

HTML部分では、「div」を次のように非表示にします。

<div id="visualization" style="width: 800px; height: 400px; display: none;">
    </div>

スクリプトタグ間で、AnnotatedTimeLine行の直前に「div」を表示します

      data.addRows([
        [new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
        [new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
        [new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
        [new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
        [new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null],
        [new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
      ]);

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

new google.visualization.AnnotatedTimeLine目に見える「div」が必要だからです。「div」を再表示すると、視覚化クラスはオブジェクトを正常に構築します。

于 2013-03-04T22:09:34.347 に答える
0

style ='visibility：hidden;'を使用することもできます。divを「非表示」にしたい場合。

于 2013-12-04T08:48:09.223 に答える