谷歌圖表表忽略分頁寬度

我使用谷歌圖表來顯示分頁表。谷歌圖表表忽略分頁寬度

當我加載頁面時，表格的寬度非常小，只有在第一次分頁後才調整到合適的寬度，即。

我試圖設置一個明確的寬度並檢查表元素，寬度屬性被設置爲正確的大小，但該表仍然很小的負載。

有沒有什麼特別的代碼，這是一樣的，在操場的例子：

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

有沒有辦法迫使表調整到設定的尺寸是多少？

感謝

來源

2012-12-06 BarakChamo

你是否嘗試更改圖表容器div？ –

嘗試類似這樣：'

' –

容器已經設置爲正確的寬度，這是表格元素的動作 – BarakChamo

現在我只是再次$ .WIDTH（）設置寬度，

但這似乎不是最佳的修復

來源

2012-12-06 08:44:04 BarakChamo

您能分享您的代碼嗎？ –

如果您使用表格元素來顯示谷歌表，並且如果您的項目中有表格的CSS代碼，然後它被自定義表格css覆蓋。我會建議使用div元素。 –

我不使用表格作爲容器，Google Charts會生成一個表格：

此表格是一個寬度問題。 – BarakChamo

腳本：

<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代碼，它會覆蓋谷歌生成的表格CSS。

您的自定義表格CSS代碼也會影響Google表格。

來源

2012-12-06 09:18:51

這工作正常，對我說：

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

並且必須設置表格的寬度......

table.draw(data, { 
width:'100%', 
... 
});

來源

2013-06-10 14:09:05

這工作是給通過CSS的寬度爲100％表中唯一的解決辦法：

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

Givin initalisation中選項參數表中的寬度只適用於像素值。而其他建議的解決方案似乎不是很優雅。

來源

2014-12-04 07:56:05 garyee

谷歌圖表表忽略分頁寬度

回答

相關問題