Google Chart：根据总行数动态改变图表的高度

发布于 2024-11-07 08:28:58 字数 25301 浏览 0 评论 0原文

谷歌最近提供了使用一些本机控件过滤图表结果的功能。

我在下面提供的一些代码直接取自新的“依赖控件” ' 在 Google Chart API 游乐场中。我的问题与这个新的动态功能中施加的限制直接相关。

我有一个包含 4000 多行的大型数据集，我想将其显示在一个 hbar 图中。我不知道会有多少行，但我可以使用以下代码来查找。

var initialHeight = data.getNumberOfRows() * 60

我遇到的问题是图表高度需要非常高才能显示所有 4000 多条记录。但应用依赖控件时图表高度不会改变。数据不会调整大小，而是会“增长”以填充原始图形的高度。图表中的条形在相同空间内变得更高。因此，当我的 4000 多条记录被过滤为只有一条记录时，该条记录与最初的 4000 多条记录一样高。

为了解决这个问题，我使用 JQUERY 来改变图形周围的 DIV 的大小，这反过来又改变了图形的大小。这是可行的，因为如果没有显式设置，图形会从周围的 DIV 继承其大小。

** 下面的初步回复涉及我现已删除的代码，因为开发已经取得进展。 **

第 2 部分。

在 Oli 的帮助下，我进一步开发了这个脚本，它几乎可以工作了......我希望。

该声明有两个注意事项。

第一个是它必须“绘制”图表两次，第一次是为了计算需要显示的行数，第二次是为了将图表的大小拉伸或缩小到相同大小的 Div。

这并不像我想要的那么简洁，但找不到解决方法？

第二个警告是它在第一个“抽奖”事件的“就绪”状态上出错。如果删除 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>

非常感谢您在创建此脚本时提供的任何帮助。我认为这将非常有用。

原文

Google have recently provided the ability to filter the graph results using some native controls.

Some of the code I provide below is taken directly from the new 'Dependent controls' in the Google Chart API playground. My problem is directly related to limitations imposed in this new dynamic functionality.

I have a large dataset of 4000+ rows, which I want to display in one hbar graph. I don't know how many rows there will be but I can use the following code to find out.

var initialHeight = data.getNumberOfRows() * 60

The problem I have is that the chart height needs to be very tall in order to display all of the 4000+ records. But the chart height does not change when the dependent controls are applied. Instead of resizing, the data 'grows' to fill the original graph height. The bars in the chart just become taller within the same space. Therefore, when my 4000+ records are filtered down to just one record, that one record is as tall as the initial 4000+.

To combat this I am using JQUERY to alter the size of the DIV surrounding the graph, which in turn alters the graph size. This works because the graph inherits its size from the surrounding DIV, if its not explicitly set.

** THE INITIAL RESPONSES BELOW REFERRED TO CODE I HAVE NOW REMOVED, BECAUSE THE DEVELOPMENT HAS PROGRESSED. **

Part 2.

Following kind help from Oli, I have further developed this script and it is almost working ... I hope.

There are two caviats to that statement.

The first is that it has to 'draw' the chart twice, the first time in order to calculate the number of rows it needs to display, the second time in order to stretch or shrink the size of the chart to the equally sized Div.

This is not as concise as I would like it but can't find a way around it?

The second caviat is that it errors on the 'ready' state of the first 'draw' event. If you remove the following code for the 3 'ControlWrapper' elements you will see them.

if(barChart.getDataTable()){

This error means that altering the 'cityPicker' filter does not change the height. It now works for the country and region as it should do.

Once again, I cannot find a way around this. and I think that it's my JS knowledge, rather than anything else.

Here is the complete code for the page as it currently stands:

<!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>

A massive thanks in advance for any help you can provide in creating this script. I think it will be hugely useful.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

神经暖 2024-11-14 08:28:58

据我了解，您想要找出应用过滤器后图表基础数据表中的行数。

您可以通过向控件添加事件侦听器来侦听“statechange”事件来实现此目的。当控件更改时会触发此事件。发生这种情况时，您可以抓取图表并获取其数据表中更新的行数。此处为控制文档。

在操场上的链接示例中的最后一个右大括号之前添加了以下内容，试一试：

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

更改国家/地区选择器，它应该提醒更新的行数。

From what I understand, you want to find out the number of rows in the underlying data table of a chart after a filter has been applied.

You could do this by adding event listeners to your controls, listening for a 'statechange' event. This is fired when a control changes. When this happens, you can grab your chart and get the updated number of rows in it's data table. Control docs here.

I added the following just before the final closing brace in your linked example in the playground, give it a shot:

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

Change the country picker and it should alert the updated number of rows.

回复收藏 0 原文

美男兮 2024-11-14 08:28:58

这段代码终于在我下面提供的示例中起作用了。它唯一需要的是在运行时设置周围 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>

感谢所有帮助找到解决方案的人。

This code is finally working in the example I provide below. The only thing it requires is the height of the surrounding DIV to be set at runtime. Maybe you can find a way around this.

<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>

Thanks to everyone who helped find a solution.

回复收藏 0 原文

~没有更多了~