试图将树形图和气泡图放在同一页面上，两者都单独工作，但不能一起工作。尝试了一堆不同的东西，但不确定我是否正确定义了这两个独立的东西。
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.load('visualization', "1", {packages: ['treemap']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
[
["State","Percent of GDP","Average Freshman Graduation Rate","Region","Expenditure ($ millions)"],
["Alabama",0.214,71.8,"Southeast",5165],
["Alaska",0.135,75.5,"Far West",1635],
["Arizona",0.186,74.7,"Southwest",5454],
["Arkansas",0.155,75,"Southeast",3342],
["California",0.209,78.2,"Far West",47674],
["Colorado",0.265,79.8,"Rocky Mountain",7547],
["Connecticut",0.14,75.1,"New England",3930],
["Deleware",0.243,75.5,"Mid-Atlantic",2227],
["Florida",0.181,70.8,"Southeast",12636],
["Georgia",0.241,69.9,"Southeast",9916],
["Hawaii",0.155,75.4,"Far West",1794],
["Idaho",0.226,84,"Rocky Mountain",1634],
["Illinois",0.144,81.9,"Greater Lakes",9588],
["Indiana",0.313,77.2,"Greater Lakes",8680],
["Iowa",0.166,87.9,"Plains",3251],
["Kansas",0.259,84.5,"Plains",3737],
["Kentucky",0.196,79.9,"Southeast",5021],
["Louisiana",0.181,68.8,"Southeast",5367],
["Maine",0.166,82.8,"New England",1297],
["Maryland",0.191,82.2,"Mid-Atlantic",7073],
["Massachusetts",0.106,82.6,"New England",6402],
["Michigan",0.268,75.9,"Greater Lakes",13059],
["Minnesota",0.272,88.2,"Plains",9729],
["Mississippi",0.163,63.8,"Southeast",3174],
["Missouri",0.228,83.7,"Plains",5229],
["Montana",0.155,81.9,"Rocky Mountain",936],
["Nebraska",0.146,83.8,"Plains",1488],
["Nevada",0.222,57.8,"Far West",1976],
["New Hampshire",0.233,86.3,"New England",1171],
["New Jersey",0.243,87.2,"Mid-Atlantic",12651],
["New Mexico",0.197,67.3,"Southwest",2870],
["New York",0.193,76,"Mid-Atlantic",25657],
["North Carolina",0.206,76.9,"Southeast",10605],
["North Dakota",0.143,88.4,"Plains",851],
["Ohio",0.198,81.4,"Greater Lakes",11515],
["Oklahoma",0.162,78.5,"Southwest",3474],
["Oregon",0.143,76.3,"Far West",3680],
["Pennsylvania",0.189,84.1,"Mid-Atlantic",12820],
["Rhode Island",0.149,76.4,"New England",1209],
["South Carolina",0.175,68.2,"Southeast",3903],
["South Dakota",0.14,81.8,"Plains",578],
["Tennessee",0.178,80.4,"Southeast",5609],
["Texas",0.27,78.9,"Southwest",26163],
["Utah",0.245,78.6,"Rocky Mountain",3091],
["Vermont",0.325,91.4,"New England",1613],
["Virginia",0.155,81.2,"Southeast",6928],
["Washington",0.237,77.2,"Far West",7873],
["West Virginia",0.095,78.3,"Southeast",2221],
["Wisconsin",0.162,91.1,"Greater Lakes",6935],
["Wyoming",0.055,80.3,"Rocky Mountain",474]
]);
var data2 = google.visualization.arrayToDataTable([
["Location", "Parent", "Spending in $millions (size)"],
["United States", null, 340852],
["New England", "United States", 15622],
["Connecticut", "New England", 3930],
["Maine", "New England", 1297],
["Massachusetts", "New England", 6402],
["New Hampshire", "New England", 1171],
["Rhode Island", "New England", 1209],
["Vermont", "New England", 1613],
["Mid-Atlantic", "United States", 60428],
["Deleware", "Mid-Atlantic", 2227],
["Maryland", "Mid-Atlantic", 7073],
["New Jersey", "Mid-Atlantic", 12651],
["New York", "Mid-Atlantic", 25657],
["Pennsylvania", "Mid-Atlantic", 12820],
["Greater Lakes", "United States", 49777],
["Illinois", "Greater Lakes", 9588],
["Indiana", "Greater Lakes", 8680],
["Michigan", "Greater Lakes", 13059],
["Ohio", "Greater Lakes", 11515],
["Wisconsin", "Greater Lakes", 6935],
["Plains", "United States", 24863],
["Iowa", "Plains", 3251],
["Kansas", "Plains", 3737],
["Minnesota", "Plains", 9729],
["Missouri", "Plains", 5229],
["Nebraska", "Plains", 1488],
["North Dakota", "Plains", 851],
["South Dakota", "Plains", 578],
["Southeast", "United States", 73887],
["Alabama", "Southeast", 5165],
["Arkansas", "Southeast", 3342],
["Florida", "Southeast", 12636],
["Georgia", "Southeast", 9916],
["Kentucky", "Southeast", 5021],
["Louisiana", "Southeast", 5367],
["Mississippi", "Southeast", 3174],
["North Carolina", "Southeast", 10605],
["South Carolina", "Southeast", 3903],
["Tennessee", "Southeast", 5609],
["Virginia", "Southeast", 6928],
["West Virginia", "Southeast", 2221],
["Southwest", "United States", 37961],
["Arizona", "Southwest", 5454],
["New Mexico", "Southwest", 2870],
["Oklahoma", "Southwest", 3474],
["Texas", "Southwest", 26163],
["Rocky Mountain", "United States", 13682],
["Colorado", "Rocky Mountain", 7547],
["Idaho", "Rocky Mountain", 1634],
["Montana", "Rocky Mountain", 936],
["Utah", "Rocky Mountain", 3091],
["Wyoming", "Rocky Mountain", 474],
["Far West", "United States", 64632],
["Alaska", "Far West", 1635],
["California", "Far West", 47674],
["Hawaii", "Far West", 1794],
["Nevada", "Far West", 1976],
["Oregon", "Far West", 3680],
["Washington", "Far West", 7873]
]);
var options = {
title: 'Correlation between Average Freshman Graduation Rate (After Four Years of High School), Percentage of GDP Spent on Education, and State Expenditure on Education (2013)',
hAxis: {title: 'Percent of GDP'},
vAxis: {title: 'AFGR'},
bubble: {textStyle: {fontSize: 11}}
};
var options2 = {};
var chart = google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
var tree = google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data, {
headerHeight: 15,
fontColor: 'black',
showScale: true
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>