Google最近提供了使用某些原生控件过滤图表结果的功能。
我在下面提供的部分代码直接来自Google Chart API操场中的新'Dependent controls'。我的问题与此新动态功能中的限制直接相关。
我有一个4000多行的大型数据集，我希望在一个hbar图中显示。我不知道会有多少行，但我可以使用以下代码来查找。
var initialHeight = data.getNumberOfRows() * 60
我遇到的问题是图表高度需要非常高才能显示所有4000多条记录。但是，应用依赖控件时图表高度不会更改。数据“增长”而不是调整大小以填充原始图形高度。图表中的条形图在同一空间内变得更高。因此，当我的4000多条记录被过滤到一条记录时，那条记录与最初的4000条记录一样高。
为了解决这个问题，我使用JQUERY来改变图形周围DIV的大小，从而改变图形大小。这是有效的，因为如果未明确设置，图表将从周围的DIV继承其大小。
**由于发展已经取得进展，我现在已经删除了以下的初步响应。 **
第2部分。
在 Oli 的帮助下，我进一步开发了这个脚本，它几乎正在工作......我希望如此。
该声明中有两条鱼缸。
首先是它必须“绘制”图表两次，第一次是为了计算它需要显示的行数，第二次是为了将图表的大小拉伸或缩小到相同的大小的Div。
这不像我想的那样简洁，却无法找到解决方法吗？
第二个空洞是它在第一个'draw'事件的'ready'状态下出错。如果删除3'ControlWrapper'元素的以下代码，您将看到它们。
if(barChart.getDataTable()){
此错误表示更改“cityPicker”过滤器不会更改高度。它现在适用于国家和地区。
再一次，我无法找到解决方法。我认为这是我的JS知识，而不是其他任何东西。
以下是目前网页的完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script src="http://jquery.com/files/social/js/jquery.tabs.js"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
data = google.visualization.arrayToDataTable([
['Make','Region','City','Total'],
['Renault','South','York',68],
['Renault','South','Yeovil',18],
['Renault','South','Wymondham',10],
['Renault','South','Wrexham',93],
['Renault','South','Worthing',25],
['Ford','South East','Sudbury',8],
['Ford','South East','Strontian',11],
['Ford','South East','Strathy',9],
['Vauxhall','South East','Strathpeffer',27],
['Vauxhall','South East','Strathdon',9],
['Vauxhall','South East','Strathaven',173],
['Vauxhall','South East','Stratford-upon-',44],
['Vauxhall','South East','Stranraer',164],
['Vauxhall','South East','Stowmarket',10],
['Vauxhall','South East','Stow-on-the-Wol',4],
['Vauxhall','South East','Stornoway',226],
['Toyota','South East','Stonehaven',243],
['Toyota','South East','Stoke-on-Trent',1680],
['Toyota','South East','Stirling',3103],
['Toyota','South East','Stevenage',21],
['Toyota','South East','Stanhope',24],
['Toyota','South East','Stamford',12],
['Toyota','South East','Staines',30],
['Toyota','South East','Stafford',832],
['Toyota','South East','St Helens',666],
['Toyota','South East','St Boswells',73],
['Toyota','South East','St Austell',20],
['Toyota','South East','St Andrews',734],
['Toyota','South East','St Albans',75],
['Toyota','South East','Spilsby',1],
['BMW','South East','Spalding',6],
['BMW','South East','Southport',217],
['BMW','South East','Southend-on-Sea',107],
['BMW','South East','Southampton',66],
['BMW','South East','South Molton',1],
['BMW','South East','Slough',155],
['BMW','South East','Sleaford',6],
['BMW','South East','Skipton',14],
['BMW','South East','Skelmersdale',185],
['BMW','South East','Skegness',8],
['BMW','South East','Sittingbourne',15],
['BMW','South East','Shrewsbury',160],
['BMW','South East','Shetland',53],
['BMW','South East','Shepton Mallet',6],
['BMW','South East','Sheffield',217],
['BMW','South East','Shap',34],
['BMW','South East','Shaftesbury',3],
['BMW','South East','Sevenoaks',83],
['BMW','South East','Settle',7],
['BMW','South East','Selkirk',39],
['BMW','South East','Selby',10],
['BMW','South East','Sedgefield',8],
['BMW','South East','Sedbergh',11],
['BMW','South East','Scunthorpe',28],
['BMW','South East','Scourie',7],
['BMW','South East','Scarinish',38],
['BMW','South East','Scarborough',17],
['BMW','South East','Saxmundham',10],
['BMW','South East','Sanquhar',69],
['BMW','South East','Sandy',3],
['BMW','South East','Sandwick',51],
['BMW','South East','Sanday',9],
['BMW','South East','Salisbury',11],
['BMW','South East','Saintfield',4],
['BMW','South East','Saffron Walden',1],
['BMW','South East','Rye',17],
['BMW','South East','Ruthin',12],
['BMW','South East','Runcorn',318],
['BMW','South East','Rugely',142],
['BMW','South East','Rugby',44],
['BMW','South East','Royston',18],
['BMW','South East','Rothesay',132],
['BMW','South East','Rotherham',93],
['BMW','South East','Rothbury',22],
['BMW','South East','Rostrevor',25],
['BMW','South East','Ross-on-Wye',4],
['BMW','South East','Romsey',6],
['BMW','South East','Romford',57],
['BMW','South East','Rochdale',209],
['BMW','South East','Ripon',19],
['BMW','South East','Ripley',35],
['BMW','South East','Ringwood',8],
['BMW','South East','Richmond',21],
['Renault','South East','Rhyl',55],
['Renault','South East','Retford',18],
['Renault','South East','Redruth',7],
['Renault','South East','Redhill',124],
['Renault','South East','Redditch',78],
['Renault','South East','Reading',101],
['Renault','South East','Raughton Head',54],
['Renault','South East','Pwllheli',4],
['Renault','South East','Prudhoe',162],
['Renault','South East','Preston',1126],
['Renault','South East','Portsmouth',108],
['Ford','South East','Porthmadog',14],
['Ford','South East','Portadown',14],
['Ford','South East','Port Ellen',124],
['Ford','South East','Pooley Bridge',57],
['Ford','South East','Pontypridd',51],
['Ford','South East','Pontypool',15],
['Ford','South East','Pontefract',100],
['Ford','South East','Pocklington',13],
['Ford','South East','Plymouth',47],
['Ford','South East','Pitlochry',142],
['Vauxhall','South East','Pickering',9],
['Vauxhall','South East','Petersfield',10],
['Vauxhall','South East','Peterhead',691],
['Vauxhall','South East','Peterborough',49],
['Vauxhall','South East','Perth',1455],
['Vauxhall','South East','Penzance',11],
['Vauxhall','South East','Penrith',372],
['Vauxhall','North','Penicuik',233],
['Toyota','North','Pencombe',3],
['Toyota','North','Peebles',53],
['Toyota','North','Peat Inn',579],
['Toyota','North','Patrington',9],
['Toyota','North','Pakenham',4],
['Toyota','North','Oxford',55],
['Toyota','North','Oswestry',35],
['Toyota','North','Orpington',12],
['Toyota','North','Orkney',166],
['Toyota','North','Omagh',8],
['Toyota','North','Oldmeldrum',361],
['Toyota','North','Okehampton',4],
['Toyota','North','Oban',221],
['Toyota','North','Oakham',18],
['BMW','North','Nottingham',184],
['BMW','North','Norwich',83],
['BMW','North','Northwich',1610],
['BMW','East','Northampton',87],
['BMW','East','Northallerton',53],
['BMW','East','North Walsham',2],
['BMW','East','North Cave',8],
['BMW','East','North Berwick',233],
['BMW','East','Newtownstewart',5],
['BMW','East','Newtown',7],
['BMW','East','Newton Stewart',55],
['Renault','East','Newton Abbot',19],
['Renault','East','Newry',15],
['Renault','East','Newquay',1],
['Renault','East','Newport',58],
['Renault','East','Newmarket',7],
['Renault','East','Newcastle (Co.D',2],
['Renault','East','Newbury',38],
['Renault','East','Newark',24],
['Renault','East','New Mills',61],
['Renault','East','New Luce',15],
['Renault','East','New Galloway',25],
['Ford','East','Neath',25],
['Ford','East','Narberth',1],
['Ford','East','Nairn',183],
['Ford','East','Motherwell',4552],
['Ford','East','Moscow',337],
['Ford','East','Morpeth',400],
['Ford','East','Montrose',241],
['Ford','East','Monmouth',3],
['Ford','East','Mold',63],
['Ford','East','Moffat',26],
['Vauxhall','East','Minehead',1],
['Vauxhall','East','Milton Keynes',175],
['Vauxhall','East','Millom',27],
['Vauxhall','East','Milford Haven',8],
['Vauxhall','East','Middlesbrough',190],
['Vauxhall','East','Mid Yell',18],
['Vauxhall','East','Merthyr Tydfil',18],
['Vauxhall','East','Meriden',14],
['Toyota','East','Melton Mowbray',16],
['Toyota','East','Medway',45],
['Toyota','East','Maybole',143],
['Toyota','East','Maud',211],
['Toyota','East','Matlock',10],
['Toyota','East','Martin',4],
['Toyota','East','Marlborough',10],
['Toyota','East','Market Weighton',4],
['Toyota','East','Market Rasen',16],
['Toyota','East','Market Harborou',7],
['Toyota','East','Market Drayton',46],
['Toyota','East','Mansfield',71],
['Toyota','East','Manchester',6602],
['Toyota','East','Malvern',46],
['BMW','East','Malton',6],
['BMW','East','Malmesbury',4],
['BMW','East','Mallaig',34],
['BMW','East','Maldon',25],
['BMW','East','Maidstone',41],
['BMW','East','Maidenhead',45],
['BMW','East','Magherafelt',4],
['BMW','East','Madingley',8],
['BMW','East','Machynlleth',2],
['BMW','East','Macclesfield',428],
['BMW','East','Lynton',1],
['Renault','East','Lymington',11],
['Renault','East','Lydney',27],
['Renault','East','Lybster',48],
['Renault','East','Luton',203],
['BMW','East','Kyle',53],
['BMW','East','Knutsford',247],
['BMW','East','Knighton',1],
['BMW','East','Kirriemuir',223],
['BMW','East','Kirkwhelpington',5],
['Renault','East','Kirkcudbright',88],
['Renault','East','Kirkcaldy',3742],
['Renault','East','Kinrossie',55],
['Renault','East','Kinross',211],
['Renault','East','Kingussie',89],
['Renault','East','Kington',4],
['Renault','East','Kingsbridge',12],
['Renault','East','Kings Lynn',15],
['Renault','East','Kilrea',2],
['Renault','East','Kilmelford',44],
['Renault','East','Kilmarnock',1877],
['Ford','East','Killingholme',4],
['Ford','East','Killin',40],
['Ford','East','Killearn',568],
['Ford','East','Kilchrenan',21],
['Ford','East','Kidderminster',83],
['Ford','East','Kettering',37],
['Ford','East','Keswick',69],
['Ford','East','Kesh',2],
['Ford','East','Kendal',42],
['Ford','East','Kelso',41],
['Vauxhall','East','Keith',327],
['Vauxhall','East','Keighley',32],
['Vauxhall','East','Johnstone',1912],
['Vauxhall','East','Jersey',3],
['Vauxhall','East','Isle of Wight',33],
['Vauxhall','East','Isle of Skye Po',49],
['Vauxhall','East','Isle of Skye Ed',54],
['Vauxhall','East','Isle of Skye Br',61],
['Toyota','East','Isle of Mull To',20],
['Toyota','East','Isle of Mull Fi',7],
['Toyota','East','Isle of Mull Cr',25],
['Toyota','East','Isle of Man',40],
['Toyota','East','Isle of Benbecu',68],
['Toyota','East','Isle of Arran',87],
['Toyota','East','Ipswich',60],
['Toyota','East','Ipstones',138],
['Toyota','East','Inverurie',347],
['Toyota','East','Inverness',2007],
['Toyota','East','Inveraray',57],
['Toyota','East','Insch',59],
['Toyota','East','Huntly',127],
['Toyota','East','Huntingdon',41],
['BMW','East','Hunstanton',1],
['BMW','East','Hungerford',2],
['BMW','East','Hull',67],
['BMW','East','Huddersfield',1419],
['BMW','East','Horsham',29],
['BMW','East','Hornsea',7],
['BMW','East','Hornby',33],
['BMW','East','Honiton',7],
['BMW','East','Honington',1],
['BMW','East','Holyhead',22],
['BMW','East','Holsworthy',10],
['Renault','East','Holmes Chapel',94],
['Renault','East','Holbeach',6],
['Renault','East','Hitchin',42],
['Renault','East','Hinckley',29],
['Renault','East','High Wycombe',44],
['Renault','East','Hexham',330],
['Renault','East','Hereford',113],
['Renault','East','Henley-on-Thame',13],
['Renault','East','Hemel Hempstead',15],
['Renault','East','Helmsdale',9],
['Renault','East','Helensburgh',477],
['Ford','East','Heathfield',1],
['Ford','East','Haywards Heath',7],
['Ford','East','Hawkshead',18],
['Ford','East','Hawick',68],
['Ford','East','Haverhill',4],
['Ford','East','Haverfordwest',18],
['Ford','East','Hathersage',6],
['Ford','East','Hastings',19],
['Ford','East','Haslemere',8],
['Ford','East','Hartlepool',49],
['Vauxhall','East','Harthill',974],
['Vauxhall','East','Harrogate',37],
['Vauxhall','East','Harris',47],
['Vauxhall','East','Haltwhistle',46],
['Vauxhall','East','Halifax',280],
['Vauxhall','East','Guiseley',22],
['Vauxhall','East','Guisborough',11],
['Vauxhall','East','Guildford',52],
['Toyota','East','Guernsey',9],
['Toyota','East','Grimsby',19],
['Toyota','East','Gretna',177],
['Toyota','East','Greenock',2695],
['Toyota','East','Great Yarmouth',35],
['Toyota','East','Great Dunmow',9],
['Toyota','East','Great Bernera',15],
['Toyota','East','Grays Thurrock',28],
['Toyota','East','Gravesend',20],
['Toyota','East','Grantown-on-Spe',137],
['Toyota','East','Grantham',22],
['Toyota','East','Grange-Over-San',9],
['Toyota','East','Gosforth',93],
['Toyota','East','Goole',9],
['BMW','East','Golspie',54],
['BMW','East','Gloucester',220],
['BMW','East','Glossop',73],
['BMW','East','Glenurquhart',75],
['BMW','East','Glenborrodale',2],
['BMW','East','Glastonbury',3],
['BMW','West','Glasgow',40237],
['BMW','West','Girvan',142],
['BMW','West','Garstang',25],
['BMW','West','Galashiels',133],
['BMW','West','Gairloch',40],
['Renault','West','Gainsborough',30],
['Renault','West','Frome',7],
['Renault','West','Fraserburgh',361],
['Renault','West','Fortrose',62],
['Renault','West','Fort William',201],
['Renault','West','Fort Augustus',13],
['Renault','West','Forres',154],
['Renault','West','Forfar',229],
['Renault','West','Folkestone',20],
['Renault','West','Felixstowe',7],
['Renault','West','Faringdon',3],
['Ford','West','Fareham',6],
['Ford','West','Falmouth',14],
['Ford','West','Falkirk',3179],
['Ford','West','Fakenham',1],
['Ford','West','Exeter',31],
['Ford','West','Evesham',25],
['Ford','West','Esher',180],
['Ford','West','Enniskillen',16],
['Ford','West','Ely',8],
['Ford','West','Ellon',326],
['Vauxhall','West','Elgin',814],
['Vauxhall','West','Edinburgh',7771],
['Vauxhall','West','Eastbourne',31],
['Vauxhall','West','East Kilbride',1948],
['Vauxhall','West','East Grinstead',19],
['Vauxhall','West','Easingwold',8],
['Vauxhall','West','Dursley',22],
['Vauxhall','West','Durham',233],
['Toyota','West','Duns',22],
['Toyota','West','Dunoon',322],
['Toyota','West','Dunkeld',42],
['Toyota','West','Dungannon',67],
['Toyota','West','Dunfermline',2091],
['Toyota','West','Dundee',4582],
['Toyota','West','Dunbar',89],
['Toyota','West','Dumfries',956],
['Toyota','West','Dumbarton',1664],
['Toyota','West','Dudley',442],
['Toyota','West','Driffield',3],
['Toyota','West','Downpatrick',9],
['Toyota','West','Downham Market',4],
['Toyota','West','Dover',12],
['BMW','West','Dorking',21],
['BMW','West','Dorchester',12],
['BMW','West','Doncaster',93],
['BMW','West','Diss',5],
['BMW','West','Dingwall',324],
['BMW','West','Devizes',7],
['BMW','West','Dereham',3],
['BMW','West','Derby',109],
['BMW','West','Daventry',37],
['BMW','West','Dartford',51],
['BMW','West','Darlington',80],
['Renault','West','Dalmally',15],
['Renault','West','Cumnock',480],
['Renault','West','Cromer',10],
['Renault','West','Crieff',332],
['Renault','West','Crewe',489],
['Renault','West','Crediton',7],
['Renault','West','Crawley',63],
['Renault','West','Cranbrook',11],
['Renault','West','Craigellachie',77],
['Renault','West','Coventry',173],
['Renault','West','Coupar Angus',207],
['Ford','West','Corwen',3],
['Ford','West','Coppull',285],
['Ford','West','Cookstown',6],
['Ford','West','Consett',153],
['Ford','West','Congleton',82],
['Ford','West','Colwyn Bay',47],
['Ford','West','Coleshill',19],
['Ford','West','Coleraine',27],
['Ford','West','Coldstream',55],
['Ford','West','Colchester',50],
['Vauxhall','West','Coatbridge',3393],
['Vauxhall','West','Coalville',44],
['Vauxhall','West','Clopton',8],
['Vauxhall','West','Clitheroe',40],
['Vauxhall','West','Clevedon',32],
['Vauxhall','West','Clacton-on-Sea',13],
['Vauxhall','West','Cirencester',13],
['Vauxhall','West','Church Stretton',11],
['Toyota','West','Chipping Sodbur',49],
['Toyota','West','Chipping Norton',8],
['Toyota','West','Chippenham',63],
['Toyota','West','Chichester',34],
['Toyota','West','Chesterfield',84],
['Toyota','West','Chester',286],
['Toyota','West','Chepstow',2],
['Toyota','West','Cheltenham',29],
['Toyota','West','Chelmsford',36],
['Toyota','West','Chatteris',3],
['Toyota','West','Chard',1],
['Toyota','West','Cerne Abbas',5],
['Toyota','West','Cemmaes Road',1],
['Toyota','West','Caterham',18],
['BMW','West','Castlebay',41],
['BMW','West','Castle Douglas',103],
['BMW','West','Carrickmore',1],
['BMW','West','Carradale',38],
['BMW','West','Carmarthen',11],
['BMW','West','Carlisle',1029],
['BMW','West','Cardigan',2],
['BMW','West','Cardiff',178],
['BMW','West','Canterbury',19],
['BMW','West','Cannock',164],
['BMW','West','Campbeltown',123],
['Renault','West','Cambridge',78],
['Renault','West','Camberley',21],
['Renault','West','Callandar',123],
['Renault','West','Caernarvon',16],
['Renault','West','Buxton',29],
['Renault','West','Bury-St-Edmunds',21],
['Renault','West','Burton-on-Trent',62],
['Renault','West','Burnley',91],
['Renault','West','Bungay',4],
['Renault','West','Budleigh Salter',8],
['Renault','West','Buckingham',11],
['Ford','West','Brooke',14],
['Ford','West','Bromyard',7],
['Ford','West','Bristol',209],
['Ford','West','Brighton',79],
['Ford','West','Brigg',4],
['Ford','West','Bridport',1],
['Ford','West','Bridlington',10],
['Ford','West','Bridgwater',31],
['Ford','West','Bridgnorth',37],
['Ford','West','Bridgend',72],
['Vauxhall','West','Brentwood',35],
['Vauxhall','West','Brecon',1],
['Vauxhall','West','Brechin',148],
['Vauxhall','West','Brampton',56],
['Vauxhall','West','Braintree',21],
['Vauxhall','West','Bradford',218],
['Vauxhall','West','Bracknell',53],
['Vauxhall','West','Bournemouth',130],
['Toyota','West','Bourne',6],
['Toyota','West','Boston',5],
['Toyota','West','Boroughbridge',9],
['Toyota','West','Bolton',312],
['Toyota','West','Bodmin',3],
['Toyota','West','Blandford',5],
['Toyota','West','Blairgowrie',146],
['Toyota','West','Blackpool',233],
['Toyota','West','Blackburn',252],
['Toyota','West','Bishops Waltham',77],
['Toyota','West','Bishops Stortfo',194],
['Toyota','West','Bishops Castle',10],
['Toyota','West','Bishop Auckland',51],
['Toyota','West','Birmingham',2189],
['BMW','West','Biggar',73],
['BMW','West','Bideford',2],
['BMW','West','Bicester',16],
['BMW','West','Bewdley',31],
['BMW','West','Betws-y-Coed',2],
['BMW','West','Berwick-on-Twee',87],
['BMW','West','Bellingham',44],
['BMW','West','Belfast',144],
['BMW','West','Bedford',78],
['BMW','West','Bedale',11],
['BMW','West','Bathgate',3537],
['Renault','West','Bath',45],
['Renault','West','Basingstoke',55],
['Renault','West','Basildon',50],
['Renault','West','Barry',11],
['Renault','West','Barrow-in-Furne',75],
['Renault','West','Barnstable',9],
['Renault','West','Barnsley',55],
['Renault','West','Barnard Castle',9],
['Renault','West','Barmouth',2],
['Renault','West','Bangor (Gwynedd',60],
['Renault','West','Bangor (Co.Down',25],
['Ford','West','Banff',146],
['Ford','West','Banchory',266],
['Ford','West','Banbury',37],
['Ford','West','Banbridge',15],
['Ford','West','Bamburgh',18],
['Ford','West','Ballymoney',2],
['Ford','West','Ballymena',13],
['Ford','West','Ballyclare',12],
['Ford','West','Ballycastle',3],
['Ford','West','Ballindalloch',22],
['Vauxhall','West','Ballater',33],
['Vauxhall','West','Ballachulish',39],
['Vauxhall','North West','Bala',2],
['Vauxhall','North West','Ayton',26],
['Vauxhall','North West','Ayr',2969],
['Vauxhall','North West','Aylesbury',41],
['Vauxhall','North West','Axminster',2],
['Vauxhall','North West','Ashford (Kent)',25],
['Toyota','North West','Ashbourne',16],
['Toyota','North West','Arrochar',28],
['Toyota','North West','Armagh',4],
['Toyota','North West','Ardrossan',1920],
['Toyota','North West','Ardgay',14],
['Toyota','North West','Arbroath',539],
['Toyota','North West','Appleby',59],
['Toyota','North West','Antrim',13],
['Toyota','North West','Andover',19],
['Toyota','North West','Ammanford',10],
['Toyota','North West','Amesbury',8],
['Toyota','North West','Alton',9],
['Toyota','North West','Alnwick',70],
['Toyota','North West','Alloa',1348],
['Citroen','North','Alford (Lincs)',9],
['Citroen','West','Alford (Aberdee',80],
['Citroen','East','Aldershot',89],
['Citroen','South','Aboyne',124],
['Citroen','South West','Abington',31],
['Citroen','South East','Abingdon',45],
['Citroen','North West','Aberystwyth',13],
['Citroen','North West','Abergavenny',5],
['Citroen','North West','Aberfeldy',53],
['Citroen','North West','Aberdeen',7706]
]);
data = new google.visualization.DataView(data);
// Define category pickers for 'Country', 'Region/State' and 'City'
var countryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Make',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
var regionPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Region',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
var cityPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'City',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Define a bar chart to show 'Population' data
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart1',
'options': {
'width': '100%',
'height': '100%',
'fontSize': 14,
'chartArea': {top: 0, right: 0, bottom: 0, height:'99.4%', width:'75%'}
},
// Configure the barchart to use columns 2 (City) and 3 (Population)
'view': {'columns': [2, 3]}
});
new google.visualization.Dashboard(document.getElementById('dashboard')).
bind(countryPicker, regionPicker).
bind(regionPicker, cityPicker).
bind(cityPicker, barChart).
draw(data);
google.visualization.events.addListener(countryPicker, 'ready', function() {
if(barChart.getDataTable()){
Div('resizable',barChart.getDataTable().getNumberOfRows());
}
});
google.visualization.events.addListener(regionPicker, 'ready', function() {
if(barChart.getDataTable()){
Div('resizable',barChart.getDataTable().getNumberOfRows());
}
});
google.visualization.events.addListener(cityPicker, 'ready', function() {
if(barChart.getDataTable()){
Div('resizable',barChart.getDataTable().getNumberOfRows());
}
});
google.visualization.events.addListener(countryPicker, 'error', function() {
alert("country error??");
});
google.visualization.events.addListener(regionPicker, 'error', function() {
alert("region error??");
});
google.visualization.events.addListener(cityPicker, 'error', function() {
alert("city error??");
});
new google.visualization.Dashboard(document.getElementById('dashboard')).
//bind(countryPicker, regionPicker).
//bind(regionPicker, cityPicker).
//bind(cityPicker, barChart).
draw(data);
} // end of drawVisualization
// sets the chart size to the same size as the Div
function setGraphSize() {
$('#chart1').height($('#resizable').height());
$('#chart1').width($('#resizable').width());
//This doesn't work yet
//$(document).height($('#resizable').height());
}
function Div(id,ud) {
var div=document.getElementById(id);
var h = (ud * 40);
div.style.height = h + "px";
var w=parseInt(div.style.width)+ud;
div.style.width = 1200 + "px";
//set the graph size
setGraphSize();
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<style>
#resizable { width: 300px; height: 300px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<div id="resizable" class="ui-widget-content">
<div id="dashboard">
<table>
<tr>
<td font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
</tr>
<tr>
<td style='background-color:#EEEEEE;'>
<div style="float: left;" id="chart1"></div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
提前感谢您在创建此脚本时提供的任何帮助。我认为这将非常有用。
答案 0 :(得分：1)
根据我的理解，您希望在应用过滤器后找出图表基础数据表中的行数。
您可以通过向控件添加事件侦听器，侦听“statechange”事件来实现此目的。控件更改时会触发此操作。发生这种情况时，您可以获取图表并在其数据表中获取更新的行数。 Control docs here.
我在操场上的链接示例中的最后一个右大括号之前添加了以下内容，试一试：
google.visualization.events.addListener(countryPicker, 'statechange', function() {
alert(barChart.getDataTable().getNumberOfRows());
});
更改国家/地区选择器，它应提醒更新的行数。
答案 1 :(得分：0)
此代码最终在我下面提供的示例中工作。它唯一需要的是在运行时设置周围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>
感谢所有帮助找到解决方案的人。