允许谷歌图表显示2个以上不同的数据集 [英] allow google chart to display more than 2 different data sets
本文介绍了允许谷歌图表显示2个以上不同的数据集的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面这张图是由谷歌和它显示2数据集（茶，咖啡）。我一直在努力，以显示5个数据组玩弄但失败了。我试图改变button.onclick功能和button.value。我重视的初始code（2数据集）和改性code（5数据集）。
初始视图：
＆LT;！DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0 Strict标准// ENhttp://www.w3.org/TR/xhtml1/DTD/ XHTML1-strict.dtd＆GT;
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT;按钮式=按钮ID =B1＆gt;点击ME＆LT;！/按钮＆GT;
＆LT; META HTTP-EQUIV =内容类型内容=text / html的;字符集= UTF-8/＆GT;
＆LT;标题＆GT;
谷歌可视化API示例
＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =https://www.google.com/jsapi＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
的google.load（'可视化'，'1'，{软件包：['corechart']}）;
＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
//一些原始数据（不一定准确）
VAR rowData1 = ['月'，'玻利维亚，厄瓜多尔，马达加斯加，巴布亚几内亚，
卢旺达'，'平均']，
['2004/05'，165，938，522，998，450，114.6]
['2005/06'，135，1120，599，1268，288，382]
['2006/07'，157，1167，587，807，397，623]
['2007/08'，139，1110，615，968，215，409.4]
['2008/09'，136，691，629，1026，366，5696];
VAR rowData2 = ['月'，'玻利维亚，厄瓜多尔，马达加斯加，巴布亚几内亚，
卢旺达'，'平均']，
['2004/05'，122，638，722，998，450，614.6]
['2005/06'，100，1120，899，1268，288，682]
['2006/07'，183，167，487，207，397，623]
['2007/08'，200，510，315，1068，215，609.4]
['2008/09'，123，491，829，826，366，5696];//创建和填充数据表。
VAR数据= [];
数据[0] = google.visualization.arrayToDataTable（rowData1）;
数据[1] = google.visualization.arrayToDataTable（rowData2）;VAR的选择= {
宽度：400，
身高：240
vAxis：{标题：杯具}，
hAxis：{标题：月}，
seriesType：网吧，
系列：{5：{类型：行}，
动画：{
时间：1000，
宽松：出
}，
};
无功电流= 0;
//创建并绘制可视化。
VAR图=新google.visualization.ComboChart（的document.getElementById（'可视化'））;
VAR键=的document.getElementById（'B1'）;
功能drawChart（）{
//禁用按钮，图表是借鉴。
button.disabled = TRUE;
google.visualization.events.addListener（图表，'准备好'，
功能（）{
button.disabled = FALSE;
button.value ='切换到'+：（当前的'茶''咖啡'？）
}）;
选项['标题'] ='月'+（当前的'咖啡'：'茶'）+'按国家生产; chart.draw（数据（当前），期权）;
}
drawChart（）;button.onclick =功能（）{
电流= 1 - 电流;
drawChart（）;
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =chart_div的风格=WIDTH：900px;高度：500像素;＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
修改的视图：
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;按钮式=按钮ID =B1的onclick =的init（）;＆gt;点击ME＆LT;！/按钮＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =https://www.google.com/jsapi＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
的google.load（可视化，1，{软件包：[corechart]}）;
google.setOnLoadCallback（INIT）;
功能的init（）{
VAR rowData1 = ['学校'，'书'，'书章，期刊论文，会议，平均值]
['会计'，165，938，522，998，450]
['经济放大器;经营学，135，1120，599，1268，288]
['法'，157，1167，587，807，397]
['WitsPlus（工商管理学士学位），139，1110，615，968，215]
['研究生工商管理学院'，136，691，629，1026，366]; VAR rowData2 = ['学校'，'书'，'书章，期刊论文，会议，平均值]
['建筑放大器;计划'，122，638，722，998，450]
[化学与冶金工程'，100，1120，899，1268，288]
['土木及放大器;环境工程'，183，167，487，207，397]
[建筑经济和放大器;管理，200，510，315，1068，215]
[电气＆安培;信息工程，139，1110，615，968，215]
['机械，工业和放大器;航空工程'，165，938，522，998，450]
[矿业工程，123，491，829，826，366]; VAR rowData3 = ['学校'，'书'，'书章，期刊论文，会议，平均值]
['解剖科学，122，638，722，998，450]
['临床医学'，320，1120，279，1268，288]
['口腔健康科学，183，167，487，207，397]
['病理学'，200，560，315，679，215]，
['生理'，139，900，615，500，215]
['公共卫生'，165，938，522，998，450]
['治疗学，183，500，487，207，397]
['卫生署卫生科学教育，139，1110，615，968，215]
['中心研究生学习和研究办公室，123，491，829，826，366]; VAR rowData4 = ['学校'，'书'，'书章，期刊论文，会议，平均值]
[122，638，722，998艺术机智学校，450]
[，320，1120，279，1268'教育机智学校，288]
['人文研究生中心'，183，167，487，207，397]
['人与放大器;社区发展'，200，560，315，679，215]
[文学，语言和媒体'，139，900，615，500，215]
[社会科学，165，938，522，998，450]
['WitsPlus（BA对于工作的世界），123，491，829，826，366]; VAR rowData5 = ['学校'，'书'，'书章，期刊论文，会议，平均值]
['生物和生命科学，122，638，722，998，450]
['动物，植物及放大器;环境科学，320，1120，279，1268，288]
['分子与放大器;细胞生物学，183，167，487，207，397]
['化学'，200，560，315，679，215]
['物理'，139，900，615，500，215]
['地理学，考古学和放大器;环境研究，165，938，522，998，450]
['地质'，183，167，487，207，397]
['计算机科学与应用数学，200，560，315，679，215]
['数学'，139，900，615，500，215]
[统计与放大器;精算学，123，491，829，826，366]; //创建和填充数据表。
VAR数据= [];
数据[0] = google.visualization.arrayToDataTable（rowData1）;
数据[1] = google.visualization.arrayToDataTable（rowData2）;
数据[2] = google.visualization.arrayToDataTable（rowData3）;
数据[3] = google.visualization.arrayToDataTable（rowData4）;
数据[4] = google.visualization.arrayToDataTable（rowData5）; VAR的选择= {
宽度：600，
高度：440，
vAxis：{标题：提交}，
hAxis：{标题：学校}，
seriesType：网吧，
系列：{4：{类型：行}，
动画：{
时间：1000，
宽松：出
}，
};
无功电流= 0;
//创建并绘制可视化。
VAR图=新google.visualization.ComboChart（的document.getElementById（'chart_div'））;
VAR键=的document.getElementById（'B1'）;
功能drawChart（）{
//禁用按钮，图表是借鉴。
button.disabled = TRUE;
google.visualization.events.addListener（图表，'准备好'，
功能（）{
button.disabled = FALSE;
button.value ='切换到'+（当前的'商业，法律与管理：工程与建筑环境'）;
}）;
选项['标题'] ='提交的'+（现在的工程与建筑环境：商业，法律与管理'）+'教师'; chart.draw（数据（当前），期权）;
}
drawChart（）; button.onclick =功能（）{
电流= 1 - 电流;
drawChart（）;
}
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =chart_div的风格=WIDTH：900px;高度：500像素;＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
修改后的视图仅显示rowData1和rowData2。我试图摆弄得到它显示rowData1，rowData2，rowData3，rowData4和rowData5。
只是为了澄清，每个rowData重新presents在unversity教员和各行重新$ P $里面的值psents学校每个院系。
院系如下：
rowData1 - 商业，法律与管理，
rowData2 - 工程与建筑环境，
rowData3 - 健康科学，
rowData4 - 人文，
rowData5 - 科学
，你可能会看到rowsData1和rowData2院系已经实施。
解决方案
本：电流= 1 - 电流; 将始终在1和0之间切换，这就是为什么只有第2表将被绘制。
更简单的方法：当图表已经绘就，推第一数据表到数据的结尾 -array，那么你并不需要关心柜台， 数据[0] 始终将绘制的邻桌。
\r
\r\r
\r的google.load（可视化，1，{\r
包：[corechart]\r
}）;\r
google.setOnLoadCallback（INIT）;\r
\r
功能的init（）{\r
VAR rowData1 = [\r
['学校'，'书'，'书章，期刊论文，会议，平均值]\r
['会计'，165，938，522，998，450]\r
['经济放大器;经营学，135，1120，599，1268，288]\r
['法'，157，1167，587，807，397]\r
['WitsPlus（工商管理学士学位），139，1110，615，968，215]\r
['研究生工商管理学院'，136，691，629，1026，366]\r
];\r
\r
VAR rowData2 = [\r
['学校'，'书'，'书章，期刊论文，会议，平均值]\r
['建筑放大器;计划'，122，638，722，998，450]\r
[化学与冶金工程'，100，1120，899，1268，288]\r
['土木及放大器;环境工程'，183，167，487，207，397]\r
[建筑经济和放大器;管理，200，510，315，1068，215]\r
[电气＆安培;信息工程，139，1110，615，968，215]\r
['机械，工业和放大器;航空工程'，165，938，522，998，450]\r
[矿业工程，123，491，829，826，366]\r
];\r
\r
VAR rowData3 = [\r
['学校'，'书'，'书章，期刊论文，会议，平均值]\r
['解剖科学，122，638，722，998，450]\r
['临床医学'，320，1120，279，1268，288]\r
['口腔健康科学，183，167，487，207，397]\r
['病理学'，200，560，315，679，215]，\r
['生理'，139，900，615，500，215]\r
['公共卫生'，165，938，522，998，450]\r
['治疗学，183，500，487，207，397]\r
['卫生署卫生科学教育，139，1110，615，968，215]\r
['中心研究生学习和研究办公室，123，491，829，826，366]\r
];\r
\r
VAR rowData4 = [\r
['学校'，'书'，'书章，期刊论文，会议，平均值]\r
[122，638，722，998艺术机智学校，450]\r
[，320，1120，279，1268'教育机智学校，288]\r
['人文研究生中心'，183，167，487，207，397]\r
['人与放大器;社区发展'，200，560，315，679，215]\r
[文学，语言和媒体'，139，900，615，500，215]\r
[社会科学，165，938，522，998，450]\r
['WitsPlus（BA对于工作的世界），123，491，829，826，366]\r
];\r
\r
VAR rowData5 = [\r
['学校'，'书'，'书章，期刊论文，会议，平均值]\r
['生物和生命科学，122，638，722，998，450]\r
['动物，植物及放大器;环境科学，320，1120，279，1268，288]\r
['分子与放大器;细胞生物学，183，167，487，207，397]\r
['化学'，200，560，315，679，215]\r
['物理'，139，900，615，500，215]\r
['地理学，考古学和放大器;环境研究，165，938，522，998，450]\r
['地质'，183，167，487，207，397]\r
['计算机科学与应用数学，200，560，315，679，215]\r
['数学'，139，900，615，500，215]\r
[统计与放大器;精算学，123，491，829，826，366]\r
];\r
\r
//创建和填充数据表。\r
//注意：我们店的标题作为表属性\r
VAR数据= [];\r
数据[0] = google.visualization.arrayToDataTable（rowData1）;\r
数据[0] .setTableProperty（'标题'，'商业，法律与管理）;\r
数据[1] = google.visualization.arrayToDataTable（rowData2）;\r
数据[1] .setTableProperty（'标题'，'工程与建筑环境'）;\r
数据[2] = google.visualization.arrayToDataTable（rowData3）;\r
数据[2] .setTableProperty（'标题'，'健康科学'）;\r
数据[3] = google.visualization.arrayToDataTable（rowData4）;\r
数据[3] .setTableProperty（'标题'，'人文'）;\r
数据[4] = google.visualization.arrayToDataTable（rowData5）;\r
数据[4] .setTableProperty（'标题'，'科学'）;\r
\r
VAR的选择= {\r
宽度：600，\r
高度：440，\r
vAxis：{\r
标题：提交\r
}，\r
hAxis：{\r
标题：学校\r
}，\r
seriesType：网吧，\r
系列：{\r
4：{\r
类型：行\r
}\r
}，\r
动画：{\r
时间：1000，\r
宽松：出\r
}，\r
};\r
\r
VAR图=新google.visualization.ComboChart（的document.getElementById（'chart_div'））;\r
VAR键=的document.getElementById（'B1'）;\r
google.visualization.events.addListener（图表，'准备好'，函数（）{\r
button.disabled = FALSE;\r
}）;\r
\r
功能drawChart（）{\r
\r
选项['标题'] ='提交的'+数据[0] .getTableProperty（标题）\r
+'教师';\r
button.disabled = TRUE;\r
chart.draw（数据[0]，期权）;\r
//第一个表推到底\r
data.push（data.shift（））;\r
//按键的设定值\r
button.value ='切换到'+数据[0] .getTableProperty（标题）;\r
}\r
drawChart（）;\r
button.onclick = drawChart;\r
} \r
B1＃{\r
宽度：100％;\r
位置：固定;\r
顶部：0;\r
左：0;\r
的z-index：100;\r
} \r
＆LT;脚本类型=文/ JavaScript的SRC =https：//开头www.google.com/jsapi\"></script>\r
＆LT;输入类型=按钮ID =B1值=点击我！ /＆GT;\r
＆LT; DIV ID =chart_div＆GT;＆LT; / DIV＆GT; \r
this chart below is by Google and it displays 2 data sets (Tea, Coffee). I've been trying to play around with in order to display 5 data sets but failed. I tried changing the button.onclick function and the button.value. I have attached the initial code(2 data sets) and the modified code (5 data sets).
Initial View:
<!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">
<head>
<button type="button" id="b1">Click Me!</button>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
// Some raw data (not necessarily accurate)
var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea',
'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 114.6],
['2005/06', 135, 1120, 599, 1268, 288, 382],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 409.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]];
var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea',
'Rwanda', 'Average'],
['2004/05', 122, 638, 722, 998, 450, 614.6],
['2005/06', 100, 1120, 899, 1268, 288, 682],
['2006/07', 183, 167, 487, 207, 397, 623],
['2007/08', 200, 510, 315, 1068, 215, 609.4],
['2008/09', 123, 491, 829, 826, 366, 569.6]];
// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);
var options = {
width: 400,
height: 240,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
series: {5: {type: "line"}},
animation:{
duration: 1000,
easing: 'out'
},
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
});
options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';
chart.draw(data[current], options);
}
drawChart();
button.onclick = function() {
current = 1 - current;
drawChart();
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Modified View:
<html>
<head>
<button type="button" id="b1" onclick="init();">Click me!</button>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(init);
function init() {
var rowData1 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Accountancy', 165, 938, 522, 998, 450],
['Economic & Business Sciences', 135, 1120, 599, 1268, 288],
['Law', 157, 1167, 587, 807, 397],
['WitsPlus (BCom)', 139, 1110, 615, 968, 215],
['Graduate School of Business Administration', 136, 691, 629, 1026, 366]];
var rowData2 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Architecture & Planning', 122, 638, 722, 998, 450],
['Chemical and Metallurgical Engineering', 100, 1120, 899, 1268, 288],
['Civil & Environmental Engineering', 183, 167, 487, 207, 397],
['Construction Economics & Management', 200, 510, 315, 1068, 215],
['Electrical & Information Engineering', 139, 1110, 615, 968, 215],
['Mechanical, Industrial & Aeronautical Engineering', 165, 938, 522, 998, 450],
['Mining Engineering', 123, 491, 829, 826, 366]];
var rowData3 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Anatomical Science', 122, 638, 722, 998, 450],
['Clinical Medicine', 320, 1120, 279, 1268, 288],
['Oral Health Sciences', 183, 167, 487, 207, 397],
['Pathology', 200, 560, 315, 679, 215],
['Physiology', 139, 900, 615, 500, 215],
['Public Health', 165, 938, 522, 998, 450],
['Therapeutic Sciences', 183, 500, 487, 207, 397],
['Centre for Health Science Education', 139, 1110, 615, 968, 215],
['Centre for Postgraduate Studies and Research Office', 123, 491, 829, 826, 366]];
var rowData4 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Wits School of Arts', 122, 638, 722, 998, 450],
['Wits School of Education', 320, 1120, 279, 1268, 288],
['Humanities Graduate Centre', 183, 167, 487, 207, 397],
['Human & Community Development', 200, 560, 315, 679, 215],
['Literature, Language and Media', 139, 900, 615, 500, 215],
['Social Sciences', 165, 938, 522, 998, 450],
['WitsPlus (BA for the World of Work)', 123, 491, 829, 826, 366]];
var rowData5 = [['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Biological and Life Sciences', 122, 638, 722, 998, 450],
['Animal, Plant & Environmental Sciences', 320, 1120, 279, 1268, 288],
['Molecular & Cell Biology', 183, 167, 487, 207, 397],
['Chemistry', 200, 560, 315, 679, 215],
['Physics', 139, 900, 615, 500, 215],
['Geography, Archaeology & Environmental Studies', 165, 938, 522, 998, 450],
['Geosciences', 183, 167, 487, 207, 397],
['Computer Science & Applied Mathematics', 200, 560, 315, 679, 215],
['Mathematics', 139, 900, 615, 500, 215],
['Statistics & Actuarial Science', 123, 491, 829, 826, 366]];
// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);
data[2] = google.visualization.arrayToDataTable(rowData3);
data[3] = google.visualization.arrayToDataTable(rowData4);
data[4] = google.visualization.arrayToDataTable(rowData5);
var options = {
width: 600,
height: 440,
vAxis: { title: "Submissions" },
hAxis: { title: "School" },
seriesType: "bars",
series: { 4: { type: "line" } },
animation: {
duration: 1000,
easing: 'out'
},
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function () {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Commerce, Law & Management' : 'Engineering & the Built Environment');
});
options['title'] = 'Submissions by the ' + (current ? 'Engineering & the Built Environment' : 'Commerce, Law & Management') + ' Faculty';
chart.draw(data[current], options);
}
drawChart();
button.onclick = function () {
current = 1 - current;
drawChart();
}
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
The modified view only displays rowData1 and rowData2. I was trying to fiddle around to get it to display rowData1, rowData2, rowData3, rowData4 and rowData5. Just to clarify,each rowData represents a faculty in a unversity and the values inside each row represents the schools in each faculty.
The faculties are as follows: rowData1 - Commerce, Law & Management, rowData2 - Engineering & the Built Environment, rowData3 - Health Sciences, rowData4 - Humanities, rowData5 - Science.
as you may see the faculties for rowsData1 and rowData2 have been implemented.
解决方案
This: current = 1 - current; will always switch between 1 and 0, that's why only the first 2 tables will be drawn.
Easier approach: When a chart has been drawn, push the first datatable to the end of the data-array, then you don't need to care about counters, data[0] is always the next table that will be drawn.
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(init);
function init() {
var rowData1 = [
['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Accountancy', 165, 938, 522, 998, 450],
['Economic & Business Sciences', 135, 1120, 599, 1268, 288],
['Law', 157, 1167, 587, 807, 397],
['WitsPlus (BCom)', 139, 1110, 615, 968, 215],
['Graduate School of Business Administration', 136, 691, 629, 1026, 366]
];
var rowData2 = [
['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Architecture & Planning', 122, 638, 722, 998, 450],
['Chemical and Metallurgical Engineering', 100, 1120, 899, 1268, 288],
['Civil & Environmental Engineering', 183, 167, 487, 207, 397],
['Construction Economics & Management', 200, 510, 315, 1068, 215],
['Electrical & Information Engineering', 139, 1110, 615, 968, 215],
['Mechanical, Industrial & Aeronautical Engineering', 165, 938, 522, 998, 450],
['Mining Engineering', 123, 491, 829, 826, 366]
];
var rowData3 = [
['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Anatomical Science', 122, 638, 722, 998, 450],
['Clinical Medicine', 320, 1120, 279, 1268, 288],
['Oral Health Sciences', 183, 167, 487, 207, 397],
['Pathology', 200, 560, 315, 679, 215],
['Physiology', 139, 900, 615, 500, 215],
['Public Health', 165, 938, 522, 998, 450],
['Therapeutic Sciences', 183, 500, 487, 207, 397],
['Centre for Health Science Education', 139, 1110, 615, 968, 215],
['Centre for Postgraduate Studies and Research Office', 123, 491, 829, 826, 366]
];
var rowData4 = [
['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Wits School of Arts', 122, 638, 722, 998, 450],
['Wits School of Education', 320, 1120, 279, 1268, 288],
['Humanities Graduate Centre', 183, 167, 487, 207, 397],
['Human & Community Development', 200, 560, 315, 679, 215],
['Literature, Language and Media', 139, 900, 615, 500, 215],
['Social Sciences', 165, 938, 522, 998, 450],
['WitsPlus (BA for the World of Work)', 123, 491, 829, 826, 366]
];
var rowData5 = [
['School', 'Book', 'Book Chapter', 'Journal Article', 'Conference', 'Average'],
['Biological and Life Sciences', 122, 638, 722, 998, 450],
['Animal, Plant & Environmental Sciences', 320, 1120, 279, 1268, 288],
['Molecular & Cell Biology', 183, 167, 487, 207, 397],
['Chemistry', 200, 560, 315, 679, 215],
['Physics', 139, 900, 615, 500, 215],
['Geography, Archaeology & Environmental Studies', 165, 938, 522, 998, 450],
['Geosciences', 183, 167, 487, 207, 397],
['Computer Science & Applied Mathematics', 200, 560, 315, 679, 215],
['Mathematics', 139, 900, 615, 500, 215],
['Statistics & Actuarial Science', 123, 491, 829, 826, 366]
];
// Create and populate the data tables.
//Note: we store the title as table-property
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[0].setTableProperty('title', 'Commerce, Law & Management');
data[1] = google.visualization.arrayToDataTable(rowData2);
data[1].setTableProperty('title', 'Engineering & the Built Environment');
data[2] = google.visualization.arrayToDataTable(rowData3);
data[2].setTableProperty('title', 'Health Sciences');
data[3] = google.visualization.arrayToDataTable(rowData4);
data[3].setTableProperty('title', 'Humanities');
data[4] = google.visualization.arrayToDataTable(rowData5);
data[4].setTableProperty('title', 'Science');
var options = {
width: 600,
height: 440,
vAxis: {
title: "Submissions"
},
hAxis: {
title: "School"
},
seriesType: "bars",
series: {
4: {
type: "line"
}
},
animation: {
duration: 1000,
easing: 'out'
},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
var button = document.getElementById('b1');
google.visualization.events.addListener(chart, 'ready', function() {
button.disabled = false;
});
function drawChart() {
options['title'] = 'Submissions by the ' + data[0].getTableProperty('title')
+ ' Faculty';
button.disabled = true;
chart.draw(data[0], options);
//push the first table to the end
data.push(data.shift());
//set value for button
button.value = 'Switch to ' + data[0].getTableProperty('title');
}
drawChart();
button.onclick = drawChart;
}
#b1{
width:100%;
position:fixed;
top:0;
left:0;
z-index:100;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<input type="button" id="b1" value="Click me!" />
<div id="chart_div"></div>
这篇关于允许谷歌图表显示2个以上不同的数据集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
