1

理論的には、Google Chart は、テーブルを下にスクロールすると、テーブルのヘッダー行を自動的に修正するはずであることがわかりました。

「ユーザーがスクロールしても、ヘッダー行は固定されたままです。」( https://developers.google.com/chart/interactive/docs/gallery/table - 概要)

奇妙な理由で、テーブルのヘッダー行が修正されていません。これがコードです。基本的に、同じサンプル コードを Google のページ (上のリンク) からコピーし、40 行ほど追加しました。何か不足していますか？私はすでにFirefoxとChromeの両方で試しましたが、同じことで、修正はありません。

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>

    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Column0');
        data.addColumn('number', 'Column1'); 
        data.addRows([
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1],
          ['a',1]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_test'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>
  <body>
    <div id="table_test" style="width: 200px;"></div>
  </body>
</html>
4

1 に答える 1

2

テーブルに「height」プロパティを追加すると、ページを垂直方向に下にスクロールしても、ヘッダー行が一番上に保持されます。あなたの例を使用して、オプションに以下を追加するだけです。

あなたのコード：

table.draw(data, {showRowNumber: true});

調整されたコード：

table.draw(data, {showRowNumber: true, height: 200});

これは、誰かにスクロールしてもらいたい大量のデータがある場合に便利ですが、それはあなたが思っているものではありません。行ヘッダーを「float」にしたい場合は、絶対位置といくつかの凝ったCSSを使用して、ページをスクロールするときの動作を処理する必要があります（ページがスクロールすると仮定します）。上記のように高さを使用するだけではるかに簡単です。

于 2013-01-17T07:59:43.150 に答える