用于在Google图表中自定义表格的垂直滚动条

时间:2014-02-10 11:24:39

标签: google-visualization

我在谷歌图表中自定义表格。我只需要修复表格的页眉和页脚,并在表格的其余行中启用垂直滚动条。

以下是我试图使用的代码..

请帮帮我..谢谢提前

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div style="width:1300px;" id="table"></div>
<script type="text/javascript">
var parent = document.getElementById("table");
google.load('visualization', '1', { packages: ['table'] });
function initialize() {
drawTable();
}
google.setOnLoadCallback(initialize);
function drawTable() {
var cssClassNames = {headerRow: 'bigAndBoldClass',selectedTableRow :'scrollClass'};
var options = {'showRowNumber': false, 'allowHtml': true, 'cssClassNames':       cssClassNames, 'alternatingRowStyle': false,'height':300};
var data = new google.visualization.DataTable();
data.addColumn('string', 'Carrier');
data.addColumn('number', 'Chargeable Weight (Kg)');
data.addColumn('number', 'Spending (USD)');
data.addColumn('number', 'Transactions');  
data.addRows(12);
data.setCell(0, 0, '112-CK - China Cargo Airlines Ltd. <a href="http://www.google.com"   target="blank" class="growth-chart-icn"></a>');
data.setCell(0, 1, 10000, '<a href="http://www.google.com" target="blank" class="weight- ranking">1</a> 9455.00');
data.setCell(0, 2, 10000, '<a href="http://www.google.com" target="blank"  class="spending-ranking">5</a> 8,982.25');  
data.setCell(0, 3, 10000, '1');  
data.setCell(1, 0, '607-EY - Etihad Airways <a href="http://www.google.com" target="blank" class="growth-chart-icn"></a>');
data.setCell(1, 1, 10000, '<a href="http://www.google.com" target="blank" class="weight-ranking">2</a> 4081.00');
data.setCell(1, 2, 10000, '<a href="http://www.google.com" target="blank" class="spending-ranking">5</a> 17,964.76');  
data.setCell(1, 3, 10000, '4'); 
data.setCell(2, 0, '695-BR - EVA Airways Corporation. <a href="http://www.google.com" target="blank" class="growth-chart-icn"></a>');
data.setCell(2, 1, 10000, '<a href="http://www.google.com" target="blank" class="weight-ranking">3</a> 1898.00');
data.setCell(2, 2, 10000, '<a href="http://www.google.com" target="blank" class="spending-ranking">5</a>6,681.50');  
data.setCell(2, 3, 10000, '4');  
data.setCell(3, 0, '172-CV - Cargolux Airlines International S.A <a href="http://www.google.com" target="blank" class="growth-chart-icn"></a>');
data.setCell(3, 1, 10000, '<a href="http://www.google.com" target="blank" class="weight-ranking">4</a> 1361.00');
data.setCell(3, 2, 10000, '<a href="http://www.google.com" target="blank" class="spending-ranking">5</a>3,754.50');  
data.setCell(3, 3, 10000, '2');   
data.setCell(4, 0, '125-BA - British Airways P.I.C <a href="http://www.google.com" target="blank" class="growth-chart-icn"></a>');
data.setCell(4, 1, 10000, '<a href="http://www.google.com" target="blank" class="weight-ranking">5</a> 1343.00');
data.setCell(4, 2, 10000, '<a href="http://www.google.com" target="blank" class="spending-ranking">5</a>7,483.45');  
data.setCell(4, 3, 10000, '8');  
data.setCell(5, 0, '999-CA - Air China Cargo <a href="http://www.google.com" target="blank" class="growth-chart-icn"></a>');
data.setCell(5, 1, 10000, '<a href="http://www.google.com" target="blank" class="weight-ranking">6</a> 1225.00');
data.setCell(5, 2, 10000, '<a href="http://www.google.com" target="blank" class="spending-ranking">5</a>4,900.00');  
data.setCell(5, 3, 10000, '1'); 
data.setCell(6, 0, '176-EK - Emirates Airlines <a href="http://www.google.com" target="blank" class="growth-chart-icn"></a>');
data.setCell(6, 1, 10000, '<a href="http://www.google.com" target="blank" class="weight-ranking">7</a> 1108.00');
data.setCell(6, 2, 10000, '<a href="http://www.google.com" target="blank" class="spending-ranking">5</a>6,658.79');  
data.setCell(6, 3, 10000, '8');  
data.setCell(7, 0, '406-5X - UPS <a href="http://www.google.com" target="blank" class="growth-chart-icn"></a>');
data.setCell(7, 1, 10000, '<a href="http://www.google.com" target="blank" class="weight-ranking">8</a> 724.00');
data.setCell(7, 2, 10000, '<a href="http://www.google.com" target="blank" class="spending-ranking">5</a>3,982.00');  
data.setCell(7, 3, 10000, '1'); 
data.setCell(8, 0, '297-CI - China Airlines <a href="http://www.google.com" target="blank" class="growth-chart-icn"></a>');
data.setCell(8, 1, 10000, '<a href="http://www.google.com" target="blank" class="weight-ranking">9</a> 521.08');
data.setCell(8, 2, 10000, '<a href="http://www.google.com" target="blank" class="spending-ranking">5</a>3,222.64');  
data.setCell(8, 3, 10000, '4');  
data.setCell(9, 0, '307-WE - Centurion Air Cargo, Inc <a href="http://www.google.com"   target="blank" class="growth-chart-icn"></a>');
data.setCell(9, 1, 10000, '<a href="http://www.google.com" target="blank" class="weight-ranking">10</a> 436.00');
data.setCell(9, 2, 10000, '<a href="http://www.google.com" target="blank" class="spending-ranking">5</a>2,045.00');  
data.setCell(9, 3, 10000, '2'); 
data.setCell(10, 0, '160-CX - Cathay Pacific <a href="http://www.google.com" target="blank" class="growth-chart-icn"></a>');
data.setCell(10, 1, 10000, '<a href="http://www.google.com" target="blank" class="weight-ranking">11</a> 270.00');
data.setCell(10, 2, 10000, '<a href="http://www.google.com" target="blank" class="spending-ranking">5</a>1,876.50');  
data.setCell(10, 3, 10000, '1');  
data.setCell(11, 0, '<span  class="grand-total"> Grand Total</span>');
data.setCell(11, 1, 10000, '<span class="grand-total">104005.00 Kg</span>');
data.setCell(11, 2, 10000, '<span class="grand-total">USD 72,699.94</span>');  
data.setCell(11, 3, 10000, '<span class="grand-total">45</span>'); 
var container = document.getElementById('table');
var table = new google.visualization.Table(container); 
table.draw(data, options);
table.setSelection([{'row': 4}]);
}
</script>

0 个答案:

没有答案