Google Chart：根據總行數動態更改圖表的高度

Google最近提供了使用某些本機控件過濾圖表結果的功能。Google Chart：根據總行數動態更改圖表的高度

下面我提供的一些代碼直接來自Google Chart API操場中的新'Dependent controls'。我的問題與這種新的動態功能強加的限制直接相關。

我有一個超過4000行的大型數據集，我想在一個hbar圖中顯示。我不知道會有多少行，但我可以使用下面的代碼來查明。

var initialHeight = data.getNumberOfRows() * 60

我遇到的問題是圖表高度需要非常高才能顯示所有4000+條記錄。但是，應用依賴控件時，圖表高度不會更改。數據「增長」而不是調整大小，以填充原始圖形高度。圖表中的酒吧在相同的空間內變得更高。因此，當我的4000多條記錄被過濾到只有一條記錄時，該記錄與最初的4000+一樣高。

爲了解決這個問題，我正在使用JQUERY來改變圖形周圍DIV的大小，從而改變圖形大小。這是有效的，因爲圖形從周圍的DIV繼承它的大小，如果它沒有明確設置。

**以下代碼中的初始響應現已撤銷，因爲開發已取得進展。 **

部分在從奧利樣的幫助下，我進一步發展了這一腳本，它幾乎是工作...我希望。

這句話有兩個caviats。

第一個是它必須「繪製」圖表兩次，第一次是爲了計算它需要顯示的行數，第二次是爲了將圖表的大小拉伸或縮小到大小相等的Div。

這不像我想要的那麼簡潔，但是找不到解決方法嗎？

第二個caviat是它在第一個'draw'事件的'ready'狀態時出錯。如果刪除3個「ControlWrapper」元素的以下代碼，您將看到它們。

if(barChart.getDataTable()){

此錯誤表示更改'cityPicker'過濾器不會更改高度。它現在適用於該國家和地區，因爲它應該這樣做。

再一次，我找不到解決辦法。我認爲這是我的JS知識，而不是其他任何東西。

下面是頁面的完整代碼，因爲它目前爲：

<!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" xml:lang="en"> 
<head> 
<title>Google Visualization API Sample</title> 

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"></script> 
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script> 

<script src="http://jquery.com/files/social/js/jquery.tabs.js"></script> 
<script type="text/javascript"> 
    google.load('visualization', '1.1', {packages: ['controls']}); 
</script> 
<script type="text/javascript"> 

function drawVisualization() { 
    // Prepare the data 
    data = google.visualization.arrayToDataTable([ 
['Make','Region','City','Total'], 
['Renault','South','York',68], 
['Renault','South','Yeovil',18], 
['Renault','South','Wymondham',10], 
['Renault','South','Wrexham',93], 
['Renault','South','Worthing',25], 
['Ford','South East','Sudbury',8], 
['Ford','South East','Strontian',11], 
['Ford','South East','Strathy',9], 
['Vauxhall','South East','Strathpeffer',27], 
['Vauxhall','South East','Strathdon',9], 
['Vauxhall','South East','Strathaven',173], 
['Vauxhall','South East','Stratford-upon-',44], 
['Vauxhall','South East','Stranraer',164], 
['Vauxhall','South East','Stowmarket',10], 
['Vauxhall','South East','Stow-on-the-Wol',4], 
['Vauxhall','South East','Stornoway',226], 
['Toyota','South East','Stonehaven',243], 
['Toyota','South East','Stoke-on-Trent',1680], 
['Toyota','South East','Stirling',3103], 
['Toyota','South East','Stevenage',21], 
['Toyota','South East','Stanhope',24], 
['Toyota','South East','Stamford',12], 
['Toyota','South East','Staines',30], 
['Toyota','South East','Stafford',832], 
['Toyota','South East','St Helens',666], 
['Toyota','South East','St Boswells',73], 
['Toyota','South East','St Austell',20], 
['Toyota','South East','St Andrews',734], 
['Toyota','South East','St Albans',75], 
['Toyota','South East','Spilsby',1], 
['BMW','South East','Spalding',6], 
['BMW','South East','Southport',217], 
['BMW','South East','Southend-on-Sea',107], 
['BMW','South East','Southampton',66], 
['BMW','South East','South Molton',1], 
['BMW','South East','Slough',155], 
['BMW','South East','Sleaford',6], 
['BMW','South East','Skipton',14], 
['BMW','South East','Skelmersdale',185], 
['BMW','South East','Skegness',8], 
['BMW','South East','Sittingbourne',15], 
['BMW','South East','Shrewsbury',160], 
['BMW','South East','Shetland',53], 
['BMW','South East','Shepton Mallet',6], 
['BMW','South East','Sheffield',217], 
['BMW','South East','Shap',34], 
['BMW','South East','Shaftesbury',3], 
['BMW','South East','Sevenoaks',83], 
['BMW','South East','Settle',7], 
['BMW','South East','Selkirk',39], 
['BMW','South East','Selby',10], 
['BMW','South East','Sedgefield',8], 
['BMW','South East','Sedbergh',11], 
['BMW','South East','Scunthorpe',28], 
['BMW','South East','Scourie',7], 
['BMW','South East','Scarinish',38], 
['BMW','South East','Scarborough',17], 
['BMW','South East','Saxmundham',10], 
['BMW','South East','Sanquhar',69], 
['BMW','South East','Sandy',3], 
['BMW','South East','Sandwick',51], 
['BMW','South East','Sanday',9], 
['BMW','South East','Salisbury',11], 
['BMW','South East','Saintfield',4], 
['BMW','South East','Saffron Walden',1], 
['BMW','South East','Rye',17], 
['BMW','South East','Ruthin',12], 
['BMW','South East','Runcorn',318], 
['BMW','South East','Rugely',142], 
['BMW','South East','Rugby',44], 
['BMW','South East','Royston',18], 
['BMW','South East','Rothesay',132], 
['BMW','South East','Rotherham',93], 
['BMW','South East','Rothbury',22], 
['BMW','South East','Rostrevor',25], 
['BMW','South East','Ross-on-Wye',4], 
['BMW','South East','Romsey',6], 
['BMW','South East','Romford',57], 
['BMW','South East','Rochdale',209], 
['BMW','South East','Ripon',19], 
['BMW','South East','Ripley',35], 
['BMW','South East','Ringwood',8], 
['BMW','South East','Richmond',21], 
['Renault','South East','Rhyl',55], 
['Renault','South East','Retford',18], 
['Renault','South East','Redruth',7], 
['Renault','South East','Redhill',124], 
['Renault','South East','Redditch',78], 
['Renault','South East','Reading',101], 
['Renault','South East','Raughton Head',54], 
['Renault','South East','Pwllheli',4], 
['Renault','South East','Prudhoe',162], 
['Renault','South East','Preston',1126], 
['Renault','South East','Portsmouth',108], 
['Ford','South East','Porthmadog',14], 
['Ford','South East','Portadown',14], 
['Ford','South East','Port Ellen',124], 
['Ford','South East','Pooley Bridge',57], 
['Ford','South East','Pontypridd',51], 
['Ford','South East','Pontypool',15], 
['Ford','South East','Pontefract',100], 
['Ford','South East','Pocklington',13], 
['Ford','South East','Plymouth',47], 
['Ford','South East','Pitlochry',142], 
['Vauxhall','South East','Pickering',9], 
['Vauxhall','South East','Petersfield',10], 
['Vauxhall','South East','Peterhead',691], 
['Vauxhall','South East','Peterborough',49], 
['Vauxhall','South East','Perth',1455], 
['Vauxhall','South East','Penzance',11], 
['Vauxhall','South East','Penrith',372], 
['Vauxhall','North','Penicuik',233], 
['Toyota','North','Pencombe',3], 
['Toyota','North','Peebles',53], 
['Toyota','North','Peat Inn',579], 
['Toyota','North','Patrington',9], 
['Toyota','North','Pakenham',4], 
['Toyota','North','Oxford',55], 
['Toyota','North','Oswestry',35], 
['Toyota','North','Orpington',12], 
['Toyota','North','Orkney',166], 
['Toyota','North','Omagh',8], 
['Toyota','North','Oldmeldrum',361], 
['Toyota','North','Okehampton',4], 
['Toyota','North','Oban',221], 
['Toyota','North','Oakham',18], 
['BMW','North','Nottingham',184], 
['BMW','North','Norwich',83], 
['BMW','North','Northwich',1610], 
['BMW','East','Northampton',87], 
['BMW','East','Northallerton',53], 
['BMW','East','North Walsham',2], 
['BMW','East','North Cave',8], 
['BMW','East','North Berwick',233], 
['BMW','East','Newtownstewart',5], 
['BMW','East','Newtown',7], 
['BMW','East','Newton Stewart',55], 
['Renault','East','Newton Abbot',19], 
['Renault','East','Newry',15], 
['Renault','East','Newquay',1], 
['Renault','East','Newport',58], 
['Renault','East','Newmarket',7], 
['Renault','East','Newcastle (Co.D',2], 
['Renault','East','Newbury',38], 
['Renault','East','Newark',24], 
['Renault','East','New Mills',61], 
['Renault','East','New Luce',15], 
['Renault','East','New Galloway',25], 
['Ford','East','Neath',25], 
['Ford','East','Narberth',1], 
['Ford','East','Nairn',183], 
['Ford','East','Motherwell',4552], 
['Ford','East','Moscow',337], 
['Ford','East','Morpeth',400], 
['Ford','East','Montrose',241], 
['Ford','East','Monmouth',3], 
['Ford','East','Mold',63], 
['Ford','East','Moffat',26], 
['Vauxhall','East','Minehead',1], 
['Vauxhall','East','Milton Keynes',175], 
['Vauxhall','East','Millom',27], 
['Vauxhall','East','Milford Haven',8], 
['Vauxhall','East','Middlesbrough',190], 
['Vauxhall','East','Mid Yell',18], 
['Vauxhall','East','Merthyr Tydfil',18], 
['Vauxhall','East','Meriden',14], 
['Toyota','East','Melton Mowbray',16], 
['Toyota','East','Medway',45], 
['Toyota','East','Maybole',143], 
['Toyota','East','Maud',211], 
['Toyota','East','Matlock',10], 
['Toyota','East','Martin',4], 
['Toyota','East','Marlborough',10], 
['Toyota','East','Market Weighton',4], 
['Toyota','East','Market Rasen',16], 
['Toyota','East','Market Harborou',7], 
['Toyota','East','Market Drayton',46], 
['Toyota','East','Mansfield',71], 
['Toyota','East','Manchester',6602], 
['Toyota','East','Malvern',46], 
['BMW','East','Malton',6], 
['BMW','East','Malmesbury',4], 
['BMW','East','Mallaig',34], 
['BMW','East','Maldon',25], 
['BMW','East','Maidstone',41], 
['BMW','East','Maidenhead',45], 
['BMW','East','Magherafelt',4], 
['BMW','East','Madingley',8], 
['BMW','East','Machynlleth',2], 
['BMW','East','Macclesfield',428], 
['BMW','East','Lynton',1], 
['Renault','East','Lymington',11], 
['Renault','East','Lydney',27], 
['Renault','East','Lybster',48], 
['Renault','East','Luton',203], 
['BMW','East','Kyle',53], 
['BMW','East','Knutsford',247], 
['BMW','East','Knighton',1], 
['BMW','East','Kirriemuir',223], 
['BMW','East','Kirkwhelpington',5], 
['Renault','East','Kirkcudbright',88], 
['Renault','East','Kirkcaldy',3742], 
['Renault','East','Kinrossie',55], 
['Renault','East','Kinross',211], 
['Renault','East','Kingussie',89], 
['Renault','East','Kington',4], 
['Renault','East','Kingsbridge',12], 
['Renault','East','Kings Lynn',15], 
['Renault','East','Kilrea',2], 
['Renault','East','Kilmelford',44], 
['Renault','East','Kilmarnock',1877], 
['Ford','East','Killingholme',4], 
['Ford','East','Killin',40], 
['Ford','East','Killearn',568], 
['Ford','East','Kilchrenan',21], 
['Ford','East','Kidderminster',83], 
['Ford','East','Kettering',37], 
['Ford','East','Keswick',69], 
['Ford','East','Kesh',2], 
['Ford','East','Kendal',42], 
['Ford','East','Kelso',41], 
['Vauxhall','East','Keith',327], 
['Vauxhall','East','Keighley',32], 
['Vauxhall','East','Johnstone',1912], 
['Vauxhall','East','Jersey',3], 
['Vauxhall','East','Isle of Wight',33], 
['Vauxhall','East','Isle of Skye Po',49], 
['Vauxhall','East','Isle of Skye Ed',54], 
['Vauxhall','East','Isle of Skye Br',61], 
['Toyota','East','Isle of Mull To',20], 
['Toyota','East','Isle of Mull Fi',7], 
['Toyota','East','Isle of Mull Cr',25], 
['Toyota','East','Isle of Man',40], 
['Toyota','East','Isle of Benbecu',68], 
['Toyota','East','Isle of Arran',87], 
['Toyota','East','Ipswich',60], 
['Toyota','East','Ipstones',138], 
['Toyota','East','Inverurie',347], 
['Toyota','East','Inverness',2007], 
['Toyota','East','Inveraray',57], 
['Toyota','East','Insch',59], 
['Toyota','East','Huntly',127], 
['Toyota','East','Huntingdon',41], 
['BMW','East','Hunstanton',1], 
['BMW','East','Hungerford',2], 
['BMW','East','Hull',67], 
['BMW','East','Huddersfield',1419], 
['BMW','East','Horsham',29], 
['BMW','East','Hornsea',7], 
['BMW','East','Hornby',33], 
['BMW','East','Honiton',7], 
['BMW','East','Honington',1], 
['BMW','East','Holyhead',22], 
['BMW','East','Holsworthy',10], 
['Renault','East','Holmes Chapel',94], 
['Renault','East','Holbeach',6], 
['Renault','East','Hitchin',42], 
['Renault','East','Hinckley',29], 
['Renault','East','High Wycombe',44], 
['Renault','East','Hexham',330], 
['Renault','East','Hereford',113], 
['Renault','East','Henley-on-Thame',13], 
['Renault','East','Hemel Hempstead',15], 
['Renault','East','Helmsdale',9], 
['Renault','East','Helensburgh',477], 
['Ford','East','Heathfield',1], 
['Ford','East','Haywards Heath',7], 
['Ford','East','Hawkshead',18], 
['Ford','East','Hawick',68], 
['Ford','East','Haverhill',4], 
['Ford','East','Haverfordwest',18], 
['Ford','East','Hathersage',6], 
['Ford','East','Hastings',19], 
['Ford','East','Haslemere',8], 
['Ford','East','Hartlepool',49], 
['Vauxhall','East','Harthill',974], 
['Vauxhall','East','Harrogate',37], 
['Vauxhall','East','Harris',47], 
['Vauxhall','East','Haltwhistle',46], 
['Vauxhall','East','Halifax',280], 
['Vauxhall','East','Guiseley',22], 
['Vauxhall','East','Guisborough',11], 
['Vauxhall','East','Guildford',52], 
['Toyota','East','Guernsey',9], 
['Toyota','East','Grimsby',19], 
['Toyota','East','Gretna',177], 
['Toyota','East','Greenock',2695], 
['Toyota','East','Great Yarmouth',35], 
['Toyota','East','Great Dunmow',9], 
['Toyota','East','Great Bernera',15], 
['Toyota','East','Grays Thurrock',28], 
['Toyota','East','Gravesend',20], 
['Toyota','East','Grantown-on-Spe',137], 
['Toyota','East','Grantham',22], 
['Toyota','East','Grange-Over-San',9], 
['Toyota','East','Gosforth',93], 
['Toyota','East','Goole',9], 
['BMW','East','Golspie',54], 
['BMW','East','Gloucester',220], 
['BMW','East','Glossop',73], 
['BMW','East','Glenurquhart',75], 
['BMW','East','Glenborrodale',2], 
['BMW','East','Glastonbury',3], 
['BMW','West','Glasgow',40237], 
['BMW','West','Girvan',142], 
['BMW','West','Garstang',25], 
['BMW','West','Galashiels',133], 
['BMW','West','Gairloch',40], 
['Renault','West','Gainsborough',30], 
['Renault','West','Frome',7], 
['Renault','West','Fraserburgh',361], 
['Renault','West','Fortrose',62], 
['Renault','West','Fort William',201], 
['Renault','West','Fort Augustus',13], 
['Renault','West','Forres',154], 
['Renault','West','Forfar',229], 
['Renault','West','Folkestone',20], 
['Renault','West','Felixstowe',7], 
['Renault','West','Faringdon',3], 
['Ford','West','Fareham',6], 
['Ford','West','Falmouth',14], 
['Ford','West','Falkirk',3179], 
['Ford','West','Fakenham',1], 
['Ford','West','Exeter',31], 
['Ford','West','Evesham',25], 
['Ford','West','Esher',180], 
['Ford','West','Enniskillen',16], 
['Ford','West','Ely',8], 
['Ford','West','Ellon',326], 
['Vauxhall','West','Elgin',814], 
['Vauxhall','West','Edinburgh',7771], 
['Vauxhall','West','Eastbourne',31], 
['Vauxhall','West','East Kilbride',1948], 
['Vauxhall','West','East Grinstead',19], 
['Vauxhall','West','Easingwold',8], 
['Vauxhall','West','Dursley',22], 
['Vauxhall','West','Durham',233], 
['Toyota','West','Duns',22], 
['Toyota','West','Dunoon',322], 
['Toyota','West','Dunkeld',42], 
['Toyota','West','Dungannon',67], 
['Toyota','West','Dunfermline',2091], 
['Toyota','West','Dundee',4582], 
['Toyota','West','Dunbar',89], 
['Toyota','West','Dumfries',956], 
['Toyota','West','Dumbarton',1664], 
['Toyota','West','Dudley',442], 
['Toyota','West','Driffield',3], 
['Toyota','West','Downpatrick',9], 
['Toyota','West','Downham Market',4], 
['Toyota','West','Dover',12], 
['BMW','West','Dorking',21], 
['BMW','West','Dorchester',12], 
['BMW','West','Doncaster',93], 
['BMW','West','Diss',5], 
['BMW','West','Dingwall',324], 
['BMW','West','Devizes',7], 
['BMW','West','Dereham',3], 
['BMW','West','Derby',109], 
['BMW','West','Daventry',37], 
['BMW','West','Dartford',51], 
['BMW','West','Darlington',80], 
['Renault','West','Dalmally',15], 
['Renault','West','Cumnock',480], 
['Renault','West','Cromer',10], 
['Renault','West','Crieff',332], 
['Renault','West','Crewe',489], 
['Renault','West','Crediton',7], 
['Renault','West','Crawley',63], 
['Renault','West','Cranbrook',11], 
['Renault','West','Craigellachie',77], 
['Renault','West','Coventry',173], 
['Renault','West','Coupar Angus',207], 
['Ford','West','Corwen',3], 
['Ford','West','Coppull',285], 
['Ford','West','Cookstown',6], 
['Ford','West','Consett',153], 
['Ford','West','Congleton',82], 
['Ford','West','Colwyn Bay',47], 
['Ford','West','Coleshill',19], 
['Ford','West','Coleraine',27], 
['Ford','West','Coldstream',55], 
['Ford','West','Colchester',50], 
['Vauxhall','West','Coatbridge',3393], 
['Vauxhall','West','Coalville',44], 
['Vauxhall','West','Clopton',8], 
['Vauxhall','West','Clitheroe',40], 
['Vauxhall','West','Clevedon',32], 
['Vauxhall','West','Clacton-on-Sea',13], 
['Vauxhall','West','Cirencester',13], 
['Vauxhall','West','Church Stretton',11], 
['Toyota','West','Chipping Sodbur',49], 
['Toyota','West','Chipping Norton',8], 
['Toyota','West','Chippenham',63], 
['Toyota','West','Chichester',34], 
['Toyota','West','Chesterfield',84], 
['Toyota','West','Chester',286], 
['Toyota','West','Chepstow',2], 
['Toyota','West','Cheltenham',29], 
['Toyota','West','Chelmsford',36], 
['Toyota','West','Chatteris',3], 
['Toyota','West','Chard',1], 
['Toyota','West','Cerne Abbas',5], 
['Toyota','West','Cemmaes Road',1], 
['Toyota','West','Caterham',18], 
['BMW','West','Castlebay',41], 
['BMW','West','Castle Douglas',103], 
['BMW','West','Carrickmore',1], 
['BMW','West','Carradale',38], 
['BMW','West','Carmarthen',11], 
['BMW','West','Carlisle',1029], 
['BMW','West','Cardigan',2], 
['BMW','West','Cardiff',178], 
['BMW','West','Canterbury',19], 
['BMW','West','Cannock',164], 
['BMW','West','Campbeltown',123], 
['Renault','West','Cambridge',78], 
['Renault','West','Camberley',21], 
['Renault','West','Callandar',123], 
['Renault','West','Caernarvon',16], 
['Renault','West','Buxton',29], 
['Renault','West','Bury-St-Edmunds',21], 
['Renault','West','Burton-on-Trent',62], 
['Renault','West','Burnley',91], 
['Renault','West','Bungay',4], 
['Renault','West','Budleigh Salter',8], 
['Renault','West','Buckingham',11], 
['Ford','West','Brooke',14], 
['Ford','West','Bromyard',7], 
['Ford','West','Bristol',209], 
['Ford','West','Brighton',79], 
['Ford','West','Brigg',4], 
['Ford','West','Bridport',1], 
['Ford','West','Bridlington',10], 
['Ford','West','Bridgwater',31], 
['Ford','West','Bridgnorth',37], 
['Ford','West','Bridgend',72], 
['Vauxhall','West','Brentwood',35], 
['Vauxhall','West','Brecon',1], 
['Vauxhall','West','Brechin',148], 
['Vauxhall','West','Brampton',56], 
['Vauxhall','West','Braintree',21], 
['Vauxhall','West','Bradford',218], 
['Vauxhall','West','Bracknell',53], 
['Vauxhall','West','Bournemouth',130], 
['Toyota','West','Bourne',6], 
['Toyota','West','Boston',5], 
['Toyota','West','Boroughbridge',9], 
['Toyota','West','Bolton',312], 
['Toyota','West','Bodmin',3], 
['Toyota','West','Blandford',5], 
['Toyota','West','Blairgowrie',146], 
['Toyota','West','Blackpool',233], 
['Toyota','West','Blackburn',252], 
['Toyota','West','Bishops Waltham',77], 
['Toyota','West','Bishops Stortfo',194], 
['Toyota','West','Bishops Castle',10], 
['Toyota','West','Bishop Auckland',51], 
['Toyota','West','Birmingham',2189], 
['BMW','West','Biggar',73], 
['BMW','West','Bideford',2], 
['BMW','West','Bicester',16], 
['BMW','West','Bewdley',31], 
['BMW','West','Betws-y-Coed',2], 
['BMW','West','Berwick-on-Twee',87], 
['BMW','West','Bellingham',44], 
['BMW','West','Belfast',144], 
['BMW','West','Bedford',78], 
['BMW','West','Bedale',11], 
['BMW','West','Bathgate',3537], 
['Renault','West','Bath',45], 
['Renault','West','Basingstoke',55], 
['Renault','West','Basildon',50], 
['Renault','West','Barry',11], 
['Renault','West','Barrow-in-Furne',75], 
['Renault','West','Barnstable',9], 
['Renault','West','Barnsley',55], 
['Renault','West','Barnard Castle',9], 
['Renault','West','Barmouth',2], 
['Renault','West','Bangor (Gwynedd',60], 
['Renault','West','Bangor (Co.Down',25], 
['Ford','West','Banff',146], 
['Ford','West','Banchory',266], 
['Ford','West','Banbury',37], 
['Ford','West','Banbridge',15], 
['Ford','West','Bamburgh',18], 
['Ford','West','Ballymoney',2], 
['Ford','West','Ballymena',13], 
['Ford','West','Ballyclare',12], 
['Ford','West','Ballycastle',3], 
['Ford','West','Ballindalloch',22], 
['Vauxhall','West','Ballater',33], 
['Vauxhall','West','Ballachulish',39], 
['Vauxhall','North West','Bala',2], 
['Vauxhall','North West','Ayton',26], 
['Vauxhall','North West','Ayr',2969], 
['Vauxhall','North West','Aylesbury',41], 
['Vauxhall','North West','Axminster',2], 
['Vauxhall','North West','Ashford (Kent)',25], 
['Toyota','North West','Ashbourne',16], 
['Toyota','North West','Arrochar',28], 
['Toyota','North West','Armagh',4], 
['Toyota','North West','Ardrossan',1920], 
['Toyota','North West','Ardgay',14], 
['Toyota','North West','Arbroath',539], 
['Toyota','North West','Appleby',59], 
['Toyota','North West','Antrim',13], 
['Toyota','North West','Andover',19], 
['Toyota','North West','Ammanford',10], 
['Toyota','North West','Amesbury',8], 
['Toyota','North West','Alton',9], 
['Toyota','North West','Alnwick',70], 
['Toyota','North West','Alloa',1348], 
['Citroen','North','Alford (Lincs)',9], 
['Citroen','West','Alford (Aberdee',80], 
['Citroen','East','Aldershot',89], 
['Citroen','South','Aboyne',124], 
['Citroen','South West','Abington',31], 
['Citroen','South East','Abingdon',45], 
['Citroen','North West','Aberystwyth',13], 
['Citroen','North West','Abergavenny',5], 
['Citroen','North West','Aberfeldy',53], 
['Citroen','North West','Aberdeen',7706] 

    ]); 
    data = new google.visualization.DataView(data); 

    // Define category pickers for 'Country', 'Region/State' and 'City' 
    var countryPicker = new google.visualization.ControlWrapper({ 
     'controlType': 'CategoryFilter', 
     'containerId': 'control1', 
     'options': { 
     'filterColumnLabel': 'Make', 
     'ui': { 
      'labelStacking': 'horizontal', 
      'allowTyping': false, 
      'allowMultiple': true 
     } 
     } 
    }); 

    var regionPicker = new google.visualization.ControlWrapper({ 
     'controlType': 'CategoryFilter', 
     'containerId': 'control2', 
     'options': { 
     'filterColumnLabel': 'Region', 
     'ui': { 
      'labelStacking': 'horizontal', 
      'allowTyping': false, 
      'allowMultiple': true 
     } 
     } 
    }); 

    var cityPicker = new google.visualization.ControlWrapper({ 
     'controlType': 'CategoryFilter', 
     'containerId': 'control3', 
     'options': { 
     'filterColumnLabel': 'City', 
     'ui': { 
      'labelStacking': 'horizontal', 
      'allowTyping': false, 
      'allowMultiple': true 
     } 
     } 
    }); 

    // Define a bar chart to show 'Population' data 
    var barChart = new google.visualization.ChartWrapper({ 
     'chartType': 'BarChart', 
     'containerId': 'chart1', 
     'options': { 
     'width': '100%', 
     'height': '100%', 
     'fontSize': 14, 
     'chartArea': {top: 0, right: 0, bottom: 0, height:'99.4%', width:'75%'} 
     }, 
     // Configure the barchart to use columns 2 (City) and 3 (Population) 
     'view': {'columns': [2, 3]} 
    }); 

    new google.visualization.Dashboard(document.getElementById('dashboard')). 
    bind(countryPicker, regionPicker). 
    bind(regionPicker, cityPicker). 
    bind(cityPicker, barChart). 
    draw(data); 

    google.visualization.events.addListener(countryPicker, 'ready', function() { 
     if(barChart.getDataTable()){ 
      Div('resizable',barChart.getDataTable().getNumberOfRows()); 
     } 
    }); 
    google.visualization.events.addListener(regionPicker, 'ready', function() { 
     if(barChart.getDataTable()){ 
      Div('resizable',barChart.getDataTable().getNumberOfRows()); 
     } 
    }); 
    google.visualization.events.addListener(cityPicker, 'ready', function() { 
     if(barChart.getDataTable()){ 
      Div('resizable',barChart.getDataTable().getNumberOfRows()); 
     } 
    }); 

    google.visualization.events.addListener(countryPicker, 'error', function() { 
     alert("country error??"); 
    }); 
    google.visualization.events.addListener(regionPicker, 'error', function() { 
     alert("region error??"); 
    }); 
    google.visualization.events.addListener(cityPicker, 'error', function() { 
     alert("city error??"); 
    }); 

    new google.visualization.Dashboard(document.getElementById('dashboard')). 
    //bind(countryPicker, regionPicker). 
    //bind(regionPicker, cityPicker). 
    //bind(cityPicker, barChart). 
    draw(data); 

} // end of drawVisualization 

// sets the chart size to the same size as the Div 
function setGraphSize() { 
    $('#chart1').height($('#resizable').height()); 
    $('#chart1').width($('#resizable').width()); 

    //This doesn't work yet 
    //$(document).height($('#resizable').height()); 
} 

function Div(id,ud) { 

    var div=document.getElementById(id); 

    var h = (ud * 40); 

    div.style.height = h + "px"; 

    var w=parseInt(div.style.width)+ud; 
    div.style.width = 1200 + "px"; 

    //set the graph size 
    setGraphSize(); 
} 

google.setOnLoadCallback(drawVisualization); 
</script> 

</head> 
<body> 
<style> 
#resizable { width: 300px; height: 300px; padding: 0.5em; } 
#resizable h3 { text-align: center; margin: 0; } 
</style> 

<div id="resizable" class="ui-widget-content"> 
<div id="dashboard"> 
    <table> 
    <tr> 
     <td font-size: 0.9em;'> 
     <div id="control1"></div> 
     <div id="control2"></div> 
     <div id="control3"></div> 
     </td> 
    </tr> 
    <tr> 
     <td style='background-color:#EEEEEE;'> 
     <div style="float: left;" id="chart1"></div> 
     </td> 
    </tr> 
    </table> 
</div> 
</div> 
</body> 
</html>

提前任何幫助，您可以在創建該腳本提供了一個巨大的感謝。我認爲這將非常有用。

來源

2011-05-13 Hadleigh

在我嘗試回答這個問題之前，想要重新澄清一下，您想根據將要顯示的小節數來調整圖表的高度？ – Duniyadnd 2011-05-13 14:03:07

是的，那正是我想要做的。請看我在下面的開發中得到了多少。請不要告訴我，這有本地功能？ ... – Hadleigh 2011-05-17 13:31:32

我的意思是上面，而不是下面.... – Hadleigh 2011-05-17 15:32:12

該代碼最終在我在下面提供的示例中工作。它只需要在運行時設置周圍DIV的高度。也許你可以找到解決辦法。

<html> 
    <head> 
<!--Load the AJAX API--> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 

    // Load the Visualization API and the controls package. 
    google.load('visualization', '1.1', {'packages':['corechart', 'controls']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawDashboard); 

    // Callback that creates and populates a data table, 
    // instantiates a dashboard, a range slider and a pie chart, 
    // passes in the data and draws it. 
    function drawDashboard() { 

    // Create our data table. 
    var data = google.visualization.arrayToDataTable([ 
['Make','Region','City','Total'], 
['Renault','South','York',68], 
['Renault','South','Yeovil',18], 
['Renault','South','Wymondham',10], 
['Renault','South','Wrexham',93], 
['Renault','South','Worthing',25], 
['Renault','South','Wormbridge',1], 
['Renault','South','Worksop',35], 
['Renault','South','Workington',719], 
['Renault','South','Worcester',84], 
['Renault','South','Wolverhampton',407], 
['Renault','South','Witney',6], 
['Ford','South','Wisbech',21], 
['Ford','South','Winchester',10], 
['Ford','South','Wincanton',3], 
['Ford','South','Wigtown',41], 
['Ford','South','Wigton',147], 
['Ford','South','Wigan',1513], 
['Ford','South','Wick',145], 
['Ford','South','Whitehaven',560], 
['Ford','South','Whitchurch',15], 
['Ford','South','Whitby',8], 
['Vauxhall','South','Whatton',10], 
['Vauxhall','South','Weybridge',138], 
['Vauxhall','South','Wetherby',13], 
['Vauxhall','South','Weston-Super-Ma',41], 
['Vauxhall','South','Westerham',5], 
['Vauxhall','South','West Heslerton',8], 
['Vauxhall','South','Wem',31], 
['Vauxhall','South','Welwyn Garden C',56], 
['Toyota','South','Welshpool',10], 
['Toyota','South East','Wellingborough',93], 
['Toyota','South East','Watford',102], 
['Toyota','South East','Watchet',2], 
['Toyota','South East','Warwick',164], 
['Toyota','South East','Warrington',1808], 
['Toyota','South East','Wareham',13], 
['Toyota','South East','Ware',4], 
['Toyota','South East','Warboys',7], 
['Toyota','South East','Walsall',166], 
['Toyota','South East','Wakefield',323], 
['Toyota','South East','Uxbridge',40], 
['Toyota','South East','Ullapool',27], 
['Toyota','South East','Uckfield',17], 
['BMW','South East','Tyneside',2763], 
['BMW','South East','Turriff',122], 
['BMW','South East','Tunbridge Wells',34], 
['BMW','South East','Truro',8], 
['BMW','South East','Tranent',420], 
['BMW','South East','Torrington',1], 
['BMW','South East','Torquay',31], 
['BMW','South East','Tongue',19], 
['BMW','South East','Tomdoun',1], 
['BMW','South East','Tomatin',5], 
['BMW','South East','Tiverton',17], 
['Renault','South East','Thurso',159], 
['Renault','South East','Thornhill',55], 
['Renault','South East','Thirsk',5], 
['Renault','South East','Thetford',6], 
['Renault','South East','Thanet',15], 
['Renault','South East','Thame',5], 
['Renault','South East','Temple Cloud',10], 
['Renault','South East','Telford',131], 
['Renault','South East','Tavistock',5], 
['Renault','South East','Taunton',21], 
['Renault','South East','Tarporley',99], 
['Ford','South East','Tarbert',44], 
['Ford','South East','Tamworth',115], 
['Ford','South East','Tain',154], 
['Ford','South East','Swindon',63], 
['Ford','South East','Swansea',88], 
['Ford','South East','Swaffham',1], 
['Ford','South East','Sunderland',2199], 
['Ford','South East','Sudbury',8], 
['Ford','South East','Strontian',11], 
['Ford','South East','Strathy',9], 
['Vauxhall','South East','Strathpeffer',27], 
['Vauxhall','South East','Strathdon',9], 
['Vauxhall','South East','Strathaven',173], 
['Vauxhall','South East','Stratford-upon-',44], 
['Vauxhall','South East','Stranraer',164], 
['Vauxhall','South East','Stowmarket',10], 
['Vauxhall','South East','Stow-on-the-Wol',4], 
['Vauxhall','South East','Stornoway',226], 
['Toyota','South East','Stonehaven',243], 
['Toyota','South East','Stoke-on-Trent',1680], 
['Toyota','South East','Stirling',3103], 
['Toyota','South East','Stevenage',21], 
['Toyota','South East','Stanhope',24], 
['Toyota','South East','Stamford',12], 
['Toyota','South East','Staines',30], 
['Toyota','South East','Stafford',832], 
['Toyota','South East','St Helens',666], 
['Toyota','South East','St Boswells',73], 
['Toyota','South East','St Austell',20], 
['Toyota','South East','St Andrews',734], 
['Toyota','South East','St Albans',75], 
['Toyota','South East','Spilsby',1], 
['BMW','South East','Spalding',6], 
['BMW','South East','Southport',217], 
['BMW','South East','Southend-on-Sea',107], 
['BMW','South East','Southampton',66], 
['BMW','South East','South Molton',1], 
['BMW','South East','Slough',155], 
['BMW','South East','Sleaford',6], 
['BMW','South East','Skipton',14], 
['BMW','South East','Skelmersdale',185], 
['BMW','South East','Skegness',8], 
['BMW','South East','Sittingbourne',15], 
['BMW','South East','Shrewsbury',160], 
['BMW','South East','Shetland',53], 
['BMW','South East','Shepton Mallet',6], 
['BMW','South East','Sheffield',217], 
['BMW','South East','Shap',34], 
['BMW','South East','Shaftesbury',3], 
['BMW','South East','Sevenoaks',83], 
['BMW','South East','Settle',7], 
['BMW','South East','Selkirk',39], 
['BMW','South East','Selby',10], 
['BMW','South East','Sedgefield',8], 
['BMW','South East','Sedbergh',11], 
['BMW','South East','Scunthorpe',28], 
['BMW','South East','Scourie',7], 
['BMW','South East','Scarinish',38], 
['BMW','South East','Scarborough',17], 
['BMW','South East','Saxmundham',10], 
['BMW','South East','Sanquhar',69], 
['BMW','South East','Sandy',3], 
['BMW','South East','Sandwick',51], 
['BMW','South East','Sanday',9], 
['BMW','South East','Salisbury',11], 
['BMW','South East','Saintfield',4], 
['BMW','South East','Saffron Walden',1], 
['BMW','South East','Rye',17], 
['BMW','South East','Ruthin',12], 
['BMW','South East','Runcorn',318], 
['BMW','South East','Rugely',142], 
['BMW','South East','Rugby',44], 
['BMW','South East','Royston',18], 
['BMW','South East','Rothesay',132], 
['BMW','South East','Rotherham',93], 
['BMW','South East','Rothbury',22], 
['BMW','South East','Rostrevor',25], 
['BMW','South East','Ross-on-Wye',4], 
['BMW','South East','Romsey',6], 
['BMW','South East','Romford',57], 
['BMW','South East','Rochdale',209], 
['BMW','South East','Ripon',19], 
['BMW','South East','Ripley',35], 
['BMW','South East','Ringwood',8], 
['BMW','South East','Richmond',21], 
['Renault','South East','Rhyl',55], 
['Renault','South East','Retford',18], 
['Renault','South East','Redruth',7], 
['Renault','South East','Redhill',124], 
['Renault','South East','Redditch',78], 
['Renault','South East','Reading',101], 
['Renault','South East','Raughton Head',54], 
['Renault','South East','Pwllheli',4], 
['Renault','South East','Prudhoe',162], 
['Renault','South East','Preston',1126], 
['Renault','South East','Portsmouth',108], 
['Ford','South East','Porthmadog',14], 
['Ford','South East','Portadown',14], 
['Ford','South East','Port Ellen',124], 
['Ford','South East','Pooley Bridge',57], 
['Ford','South East','Pontypridd',51], 
['Ford','South East','Pontypool',15], 
['Ford','South East','Pontefract',100], 
['Ford','South East','Pocklington',13], 
['Ford','South East','Plymouth',47], 
['Ford','South East','Pitlochry',142], 
['Vauxhall','South East','Pickering',9], 
['Vauxhall','South East','Petersfield',10], 
['Vauxhall','South East','Peterhead',691], 
['Vauxhall','South East','Peterborough',49], 
['Vauxhall','South East','Perth',1455], 
['Vauxhall','South East','Penzance',11], 
['Vauxhall','South East','Penrith',372], 
['Vauxhall','North','Penicuik',233], 
['Toyota','North','Pencombe',3], 
['Toyota','North','Peebles',53], 
['Toyota','North','Peat Inn',579], 
['Toyota','North','Patrington',9], 
['Toyota','North','Pakenham',4], 
['Toyota','North','Oxford',55], 
['Toyota','North','Oswestry',35], 
['Toyota','North','Orpington',12], 
['Toyota','North','Orkney',166], 
['Toyota','North','Omagh',8], 
['Toyota','North','Oldmeldrum',361], 
['Toyota','North','Okehampton',4], 
['Toyota','North','Oban',221], 
['Toyota','North','Oakham',18], 
['BMW','North','Nottingham',184], 
['BMW','North','Norwich',83], 
['BMW','North','Northwich',1610], 
['BMW','East','Northampton',87], 
['BMW','East','Northallerton',53], 
['BMW','East','North Walsham',2], 
['BMW','East','North Cave',8], 
['BMW','East','North Berwick',233], 
['BMW','East','Newtownstewart',5], 
['BMW','East','Newtown',7], 
['BMW','East','Newton Stewart',55], 
['Renault','East','Newton Abbot',19], 
['Renault','East','Newry',15], 
['Renault','East','Newquay',1], 
['Renault','East','Newport',58], 
['Renault','East','Newmarket',7], 
['Renault','East','Newcastle (Co.D',2], 
['Renault','East','Newbury',38], 
['Renault','East','Newark',24], 
['Renault','East','New Mills',61], 
['Renault','East','New Luce',15], 
['Renault','East','New Galloway',25], 
['Ford','East','Neath',25], 
['Ford','East','Narberth',1], 
['Ford','East','Nairn',183], 
['Ford','East','Motherwell',4552], 
['Ford','East','Moscow',337], 
['Ford','East','Morpeth',400], 
['Ford','East','Montrose',241], 
['Ford','East','Monmouth',3], 
['Ford','East','Mold',63], 
['Ford','East','Moffat',26], 
['Vauxhall','East','Minehead',1], 
['Vauxhall','East','Milton Keynes',175], 
['Vauxhall','East','Millom',27], 
['Vauxhall','East','Milford Haven',8], 
['Vauxhall','East','Middlesbrough',190], 
['Vauxhall','East','Mid Yell',18], 
['Vauxhall','East','Merthyr Tydfil',18], 
['Vauxhall','East','Meriden',14], 
['Toyota','East','Melton Mowbray',16], 
['Toyota','East','Medway',45], 
['Toyota','East','Maybole',143], 
['Toyota','East','Maud',211], 
['Toyota','East','Matlock',10], 
['Toyota','East','Martin',4], 
['Toyota','East','Marlborough',10], 
['Toyota','East','Market Weighton',4], 
['Toyota','East','Market Rasen',16], 
['Toyota','East','Market Harborou',7], 
['Toyota','East','Market Drayton',46], 
['Toyota','East','Mansfield',71], 
['Toyota','East','Manchester',6602], 
['Toyota','East','Malvern',46], 
['BMW','East','Malton',6], 
['BMW','East','Malmesbury',4], 
['BMW','East','Mallaig',34], 
['BMW','East','Maldon',25], 
['BMW','East','Maidstone',41], 
['BMW','East','Maidenhead',45], 
['BMW','East','Magherafelt',4], 
['BMW','East','Madingley',8], 
['BMW','East','Machynlleth',2], 
['BMW','East','Macclesfield',428], 
['BMW','East','Lynton',1], 
['Renault','East','Lymington',11], 
['Renault','East','Lydney',27], 
['Renault','East','Lybster',48], 
['Renault','East','Luton',203], 
['Renault','East','Ludlow',30], 
['Renault','East','Lowestoft',14], 
['Renault','East','Louth',2], 
['Renault','East','Loughborough',22], 
['Renault','East','Looe',2], 
['Renault','East','Londonderry',19], 
['Renault','East','London',2793], 
['Ford','East','Lockerbie',88], 
['Ford','East','Lochmaddy',51], 
['Ford','East','Lochinver',11], 
['Ford','East','Lochgilphead',269], 
['Ford','East','Lochcarron',19], 
['Ford','East','Lochboisdale',22], 
['Ford','East','Llanon',7], 
['Ford','East','Llanidloes',3], 
['Ford','East','Llanelli',3], 
['Ford','East','Llandyssul',3], 
['Vauxhall','East','Llandrindod Wel',3], 
['Vauxhall','East','Llandeilo',1], 
['Vauxhall','East','Llanarth',4], 
['Vauxhall','East','Liverpool',2907], 
['Vauxhall','East','Lisnaskea',5], 
['Vauxhall','East','Liskeard',8], 
['Vauxhall','East','Lisburn',24], 
['Vauxhall','East','Lincoln',42], 
['Toyota','East','Limavady',1], 
['Toyota','East','Leyburn',8], 
['Toyota','East','Lerwick',190], 
['Toyota','East','Leominster',17], 
['Toyota','East','Leighton Buzzar',35], 
['Toyota','East','Leicester',237], 
['Toyota','East','Leeds',935], 
['Toyota','East','Lea Valley',49], 
['Toyota','East','Laurencekirk',138], 
['Toyota','East','Launceston',1], 
['Toyota','East','Lauder',24], 
['Toyota','East','Larne',4], 
['Toyota','East','Lapworth',18], 
['Toyota','East','Langholm',63], 
['BMW','East','Lancaster',135], 
['BMW','East','Lanark',748], 
['BMW','East','Lampeter',2], 
['BMW','East','Lairg',19], 
['BMW','East','Laggan',7], 
['BMW','East','Ladybank',269], 
['BMW','East','Kyle',53], 
['BMW','East','Knutsford',247], 
['BMW','East','Knighton',1], 
['BMW','East','Kirriemuir',223], 
['BMW','East','Kirkwhelpington',5], 
['Renault','East','Kirkcudbright',88], 
['Renault','East','Kirkcaldy',3742], 
['Renault','East','Kinrossie',55], 
['Renault','East','Kinross',211], 
['Renault','East','Kingussie',89], 
['Renault','East','Kington',4], 
['Renault','East','Kingsbridge',12], 
['Renault','East','Kings Lynn',15], 
['Renault','East','Kilrea',2], 
['Renault','East','Kilmelford',44], 
['Renault','East','Kilmarnock',1877], 
['Ford','East','Killingholme',4], 
['Ford','East','Killin',40], 
['Ford','East','Killearn',568], 
['Ford','East','Kilchrenan',21], 
['Ford','East','Kidderminster',83], 
['Ford','East','Kettering',37], 
['Ford','East','Keswick',69], 
['Ford','East','Kesh',2], 
['Ford','East','Kendal',42], 
['Ford','East','Kelso',41], 
['Vauxhall','East','Keith',327], 
['Vauxhall','East','Keighley',32], 
['Vauxhall','East','Johnstone',1912], 
['Vauxhall','East','Jersey',3], 
['Vauxhall','East','Isle of Wight',33], 
['Vauxhall','East','Isle of Skye Po',49], 
['Vauxhall','East','Isle of Skye Ed',54], 
['Vauxhall','East','Isle of Skye Br',61], 
['Toyota','East','Isle of Mull To',20], 
['Toyota','East','Isle of Mull Fi',7], 
['Toyota','East','Isle of Mull Cr',25], 
['Toyota','East','Isle of Man',40], 
['Toyota','East','Isle of Benbecu',68], 
['Toyota','East','Isle of Arran',87], 
['Toyota','East','Ipswich',60], 
['Toyota','East','Ipstones',138], 
['Toyota','East','Inverurie',347], 
['Toyota','East','Inverness',2007], 
['Toyota','East','Inveraray',57], 
['Toyota','East','Insch',59], 
['Toyota','East','Huntly',127], 
['Toyota','East','Huntingdon',41], 
['BMW','East','Hunstanton',1], 
['BMW','East','Hungerford',2], 
['BMW','East','Hull',67], 
['BMW','East','Huddersfield',1419], 
['BMW','East','Horsham',29], 
['BMW','East','Hornsea',7], 
['BMW','East','Hornby',33], 
['BMW','East','Honiton',7], 
['BMW','East','Honington',1], 
['BMW','East','Holyhead',22], 
['BMW','East','Holsworthy',10], 
['Renault','East','Holmes Chapel',94], 
['Renault','East','Holbeach',6], 
['Renault','East','Hitchin',42], 
['Renault','East','Hinckley',29], 
['Renault','East','High Wycombe',44], 
['Renault','East','Hexham',330], 
['Renault','East','Hereford',113], 
['Renault','East','Henley-on-Thame',13], 
['Renault','East','Hemel Hempstead',15], 
['Renault','East','Helmsdale',9], 
['Renault','East','Helensburgh',477], 
['Ford','East','Heathfield',1], 
['Ford','East','Haywards Heath',7], 
['Ford','East','Hawkshead',18], 
['Ford','East','Hawick',68], 
['Ford','East','Haverhill',4], 
['Ford','East','Haverfordwest',18], 
['Ford','East','Hathersage',6], 
['Ford','East','Hastings',19], 
['Ford','East','Haslemere',8], 
['Ford','East','Hartlepool',49], 
['Vauxhall','East','Harthill',974], 
['Vauxhall','East','Harrogate',37], 
['Vauxhall','East','Harris',47], 
['Vauxhall','East','Haltwhistle',46], 
['Vauxhall','East','Halifax',280], 
['Vauxhall','East','Guiseley',22], 
['Vauxhall','East','Guisborough',11], 
['Vauxhall','East','Guildford',52], 
['Toyota','East','Guernsey',9], 
['Toyota','East','Grimsby',19], 
['Toyota','East','Gretna',177], 
['Toyota','East','Greenock',2695], 
['Toyota','East','Great Yarmouth',35], 
['Toyota','East','Great Dunmow',9], 
['Toyota','East','Great Bernera',15], 
['Toyota','East','Grays Thurrock',28], 
['Toyota','East','Gravesend',20], 
['Toyota','East','Grantown-on-Spe',137], 
['Toyota','East','Grantham',22], 
['Toyota','East','Grange-Over-San',9], 
['Toyota','East','Gosforth',93], 
['Toyota','East','Goole',9], 
['BMW','East','Golspie',54], 
['BMW','East','Gloucester',220], 
['BMW','East','Glossop',73], 
['BMW','East','Glenurquhart',75], 
['BMW','East','Glenborrodale',2], 
['BMW','East','Glastonbury',3], 
['BMW','West','Glasgow',40237], 
['BMW','West','Girvan',142], 
['BMW','West','Garstang',25], 
['BMW','West','Galashiels',133], 
['BMW','West','Gairloch',40], 
['Renault','West','Gainsborough',30], 
['Renault','West','Frome',7], 
['Renault','West','Fraserburgh',361], 
['Renault','West','Fortrose',62], 
['BMW','West','Bellingham',44], 
['BMW','West','Belfast',144], 
['BMW','West','Bedford',78], 
['BMW','West','Bedale',11], 
['BMW','West','Bathgate',3537], 
['Renault','West','Bath',45], 
['Renault','West','Basingstoke',55], 
['Renault','West','Basildon',50], 
['Renault','West','Barry',11], 
['Renault','West','Barrow-in-Furne',75], 
['Renault','West','Barnstable',9], 
['Renault','West','Barnsley',55], 
['Renault','West','Barnard Castle',9], 
['Renault','West','Barmouth',2], 
['Renault','West','Bangor (Gwynedd',60], 
['Renault','West','Bangor (Co.Down',25], 
['Ford','West','Banff',146], 
['Ford','West','Banchory',266], 
['Ford','West','Banbury',37], 
['Ford','West','Banbridge',15], 
['Ford','West','Bamburgh',18], 
['Ford','West','Ballymoney',2], 
['Ford','West','Ballymena',13], 
['Ford','West','Ballyclare',12], 
['Ford','West','Ballycastle',3], 
['Ford','West','Ballindalloch',22], 
['Vauxhall','West','Ballater',33], 
['Vauxhall','West','Ballachulish',39], 
['Vauxhall','North West','Bala',2], 
['Vauxhall','North West','Ayton',26], 
['Vauxhall','North West','Ayr',2969], 
['Vauxhall','North West','Aylesbury',41], 
['Vauxhall','North West','Axminster',2], 
['Vauxhall','North West','Ashford (Kent)',25], 
['Toyota','North West','Ashbourne',16], 
['Toyota','North West','Arrochar',28], 
['Toyota','North West','Armagh',4], 
['Toyota','North West','Ardrossan',1920], 
['Toyota','North West','Ardgay',14], 
['Toyota','North West','Arbroath',539], 
['Toyota','North West','Appleby',59], 
['Toyota','North West','Antrim',13], 
['Toyota','North West','Andover',19], 
['Toyota','North West','Ammanford',10], 
['Toyota','North West','Amesbury',8], 
['Toyota','North West','Alton',9], 
['Toyota','North West','Alnwick',70], 
['Toyota','North West','Alloa',1348], 
['Citroen','North','Alford (Lincs)',9], 
['Citroen','West','Alford (Aberdee',80], 
['Citroen','East','Aldershot',89], 
['Citroen','South','Aboyne',124], 
['Citroen','South West','Abington',31], 
['Citroen','South East','Abingdon',45], 
['Citroen','North West','Aberystwyth',13], 
['Citroen','North West','Abergavenny',5], 
['Citroen','North West','Aberfeldy',53], 
['Citroen','North West','Aberdeen',7706] 
    ]); 

    // Create a dashboard. 
    var dashboard = new google.visualization.Dashboard(
     document.getElementById('dashboard_div')); 

    // Define category pickers for 'Country', 'Region/State' and 'City' 
    var controlPicker1 = new google.visualization.ControlWrapper({ 
     'controlType': 'CategoryFilter', 
     'containerId': 'control1', 
     'options': { 
     'filterColumnLabel': 'Make', 
     'ui': { 
      'labelStacking': 'horizontal', 
      'allowTyping': false, 
      'allowMultiple': true 
     } 
     } 
    }); 

    var controlPicker2 = new google.visualization.ControlWrapper({ 
     'controlType': 'CategoryFilter', 
     'containerId': 'control2', 
     'options': { 
     'filterColumnLabel': 'Region', 
     'ui': { 
      'labelStacking': 'horizontal', 
      'allowTyping': false, 
      'allowMultiple': true 
     } 
     } 
    }); 

    var controlPicker3 = new google.visualization.ControlWrapper({ 
     'controlType': 'CategoryFilter', 
     'containerId': 'control3', 
     'options': { 
     'filterColumnLabel': 'City', 
     'ui': { 
      'labelStacking': 'horizontal', 
      'allowTyping': false, 
      'allowMultiple': true 
     } 
     } 
    }); 

    // Create a pie chart, passing some options 
    var barChart = new google.visualization.ChartWrapper({ 
     'chartType': 'BarChart', 
     'containerId': 'chart_div', 
     'options': { 
     'width': '100%', 
     'height': '100%', 
     'fontSize': 14, 
     'chartArea': {top: 0, right: 0, bottom: 0, height:'95%', width:'70%'} 
     }, 
     // Configure the barchart to use columns 2 (City) and 3 (Population) 
     'view': {'columns': [2, 3]} 
    }); 

    google.visualization.events.addListener(dashboard, 'ready', function() { 
     // Dashboard redraw, have a look at how many rows the barChart is displaying 
     var numRows = barChart.getDataTable().getNumberOfRows(); 
     var expectedHeight = (numRows * 40)+50; 
     if (parseInt(barChart.getOption('height'), 10) != expectedHeight) { 
      // Update the chart options and redraw just it 
      Div("chart_div", expectedHeight); 
      barChart.setOption('height', expectedHeight); 
      barChart.draw(); 

     } 

    }); 

    dashboard.bind(controlPicker1, controlPicker2); 
    dashboard.bind(controlPicker2, controlPicker3); 
    dashboard.bind(controlPicker3, barChart); 

    // Draw the dashboard. 
    dashboard.draw(data); 
    } 

    function Div(id,h) { 

    var div=document.getElementById(id); 
    h = h + "px"; 

    var w=parseInt(div.style.width); 
    if($(this).width() >= 1200){ 
     w = 1200 + "px"; 
    }else{ 
     w = ($(this).width()-30) + "px"; 
    } 

    $(div).height(h); 
    $(div).width(w); 

} 

    </script> 
    </head> 

<style> 
    #chart_div { width: 1200px; height: 30000px; } 
</style> 

    <body> 
<!--Div that will hold the dashboard--> 
<div id="dashboard_div"> 
    <!--Divs that will hold each control and visualization--> 
    <div id="control1"></div> 
    <div id="control2"></div> 
    <div id="control3"></div> 
    <div id="chart_div" style="background-color:#EEEEEE;"></div> 
</div> 
    </body> 
</html>

感謝大家誰幫助找到解決方案。

來源

2011-05-18 12:35:04 Hadleigh

根據我的理解，您希望在應用過濾器後找出圖表底層數據表中的行數。

您可以通過向控件添加事件偵聽器來偵聽'statechange'事件。當控件更改時會觸發它。發生這種情況時，您可以抓住圖表並獲取其數據表中更新的行數。 Control docs here.

添加以下只需在您的鏈接例如最後右括號在操場前，給它一個鏡頭：

google.visualization.events.addListener(countryPicker, 'statechange', function() { 
    alert(barChart.getDataTable().getNumberOfRows()); 
});

改變國家選擇器，它應提醒行的更新數量。

來源

2011-05-16 04:08:13 oli

謝謝，這篇文章幫助我移動了幾個步驟的問題，我幾乎在那裏。我發佈了我需要克服的'最終'問題。 – Hadleigh 2011-05-17 13:33:44

提及控制文檔+1;他們幫助我將高度視爲圖表的一個選項！在我的情況下，我的PHP知道有多少行，所以我可以說出來。現在試圖找出谷歌圖表的解決方案比必要的大30％左右。：P – 2013-06-27 19:22:06

Google Chart：根據總行數動態更改圖表的高度

回答

相關問題