2

GoogleChartsを使用してページ付けされたテーブルを表示しています。

ページをロードすると、テーブルの幅が非常に狭くなり、最初のページング後にのみ適切な幅にサイズ変更されます。

明示的な幅を設定してテーブル要素を調べました。widthプロパティは適切なサイズに設定されていますが、ロード時にテーブルがまだ小さいです。

コードについて特別なことは何もありません。それは遊び場の例と同じです。

https://code.google.com/apis/ajax/playground/?type=visualization#table_paging

テーブルを設定されたサイズに強制的にサイズ変更する方法はありますか？

ありがとう

4

4 に答える 4

2

これは私にはうまくいきます：

$(window).on("resize", function () {
    draw();
}).resize();

テーブルの幅を設定する必要があります。

table.draw(data, {
 width:'100%',
 ...
});
于 2013-06-10T14:09:05.517 に答える
0

今のところ、$。width（）を使用して幅を再度設定しています。

しかし、これは最適な修正ではないようです

于 2012-12-06T08:44:04.187 に答える
0

スクリプト：

<script type="text/javascript">
var visualization;
var data;

var options = {'showRowNumber': true};
function drawVisualization() {
  // Create and populate the data table.
  var dataAsJson =
  {cols:[
    {id:'A',label:'Name',type:'string'},
    {id:'B',label:'Height',type:'number'},
    {id:'C',label:'Coming',type:'boolean'},
    {id:'D',label:'Time',type:'timeofday'}],
  rows:[
    {c:[{v:'Dave'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:[12,25,0,0],f:'12:25:00'}]},
  {c:[{v:'Peter'},{v:185.0,f:'185'},{v:false,f:'FALSE'},{v:[13,15,0,0],f:'13:15:00'}]},
  {c:[{v:'John'},{v:145.0,f:'145'},{v:true,f:'TRUE'},{v:[15,45,0,0],f:'15:45:00'}]},
  {c:[{v:'Moshes'},{v:198.0,f:'198'},{v:true,f:'TRUE'},{v:[16,32,0,0],f:'16:32:00'}]},
  {c:[{v:'Karen'},{v:169.0,f:'169'},{v:true,f:'TRUE'},{v:[19,50,0,0],f:'19:50:00'}]},
  {c:[{v:'Phil'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:[18,10,0,0],f:'18:10:00'}]},
  {c:[{v:'Gori'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:[13,15,0,0],f:'13:15:00'}]},
  {c:[{v:'Bill'},{v:155.0,f:'155'},{v:false,f:'FALSE'},{v:[7,40,48,0],f:'7:40:48'}]},
  {c:[{v:'Valery'},{v:199.0,f:'199'},{v:true,f:'TRUE'},{v:[6,0,0,0],f:'6:00:00'}]},
  {c:[{v:'Joey'},{v:187.0,f:'187'},{v:true,f:'TRUE'},{v:[5,2,24,0],f:'5:02:24'}]},
  {c:[{v:'Karen'},{v:190.0,f:'190'},{v:true,f:'TRUE'},{v:[6,14,24,0],f:'6:14:24'}]},
  {c:[{v:'Jin'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:[5,45,36,0],f:'5:45:36'}]},
  {c:[{v:'Gili'},{v:178.0,f:'178'},{v:true,f:'TRUE'},{v:[6,43,12,0],f:'6:43:12'}]},
  {c:[{v:'Harry'},{v:172.0,f:'172'},{v:false,f:'FALSE'},{v:[6,14,24,0],f:'6:14:24'}]},
  {c:[{v:'Handerson'},{v:175.0,f:'175'},{v:true,f:'TRUE'},{v:[6,57,36,0],f:'6:57:36'}]},
  {c:[{v:'Vornoy'},{v:170.0,f:'170'},{v:true,f:'TRUE'},{v:[13,12,0,0],f:'13:12:00'}]}]};
  data = new google.visualization.DataTable(dataAsJson);

  // Set paging configuration options
  // Note: these options are changed by the UI controls in the example.
  options['page'] = 'enable';
  options['pageSize'] = 10;
  options['pagingSymbols'] = {prev: 'prev', next: 'next'};
  options['pagingButtonsConfiguration'] = 'auto';

  // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  draw();
}

function draw() {
  visualization.draw(data, options);
}


google.setOnLoadCallback(drawVisualization);

// sets the number of pages according to the user selection.
function setNumberOfPages(value) {
  if (value) {
    options['pageSize'] = parseInt(value, 10);
    options['page'] = 'enable';
  } else {
    options['pageSize'] = null;
    options['page'] = null;  
  }
  draw();
}

// Sets custom paging symbols "Prev"/"Next"
function setCustomPagingButtons(toSet) {
  options['pagingSymbols'] = toSet ? {next: 'next', prev: 'prev'} : null;
  draw();  
}

function setPagingButtonsConfiguration(value) {
  options['pagingButtonsConfiguration'] = value;
  draw();
}

</script>

HTML：

<div id="table" style="width:100%;"></div>

上記のdivコンテナについて話しています。cssファイルにテーブル要素のcssコードがある場合、それはgoogleが生成したテーブルcssをオーバーライドします。

カスタムテーブルのcssコードは、Googleテーブルにも影響します。

于 2012-12-06T09:18:51.190 に答える
0

うまくいった唯一の解決策は、cssを介してテーブルに100％の幅を与えることでした。

.google-visualization-table-table{width: 100%}

初期化時のオプションパラメータのテーブルの幅を指定すると、ピクセル値でのみ機能しました。そして、他の提案された解決策はあまりエレガントではないようでした。

于 2014-12-04T07:56:05.167 に答える