Javascript 允许google图表显示2个以上不同的数据集
下图由谷歌提供，显示了两组数据（茶、咖啡）。为了显示5个数据集，我一直在尝试使用，但失败了。我尝试更改button.onclick函数和button.value。我已附上初始代码（2个数据集）和修改后的代码（5个数据集） 初步看法：Javascript 允许google图表显示2个以上不同的数据集,javascript,html,asp.net,asp.net-mvc,google-visualization,Javascript,Html,Asp.net,Asp.net Mvc,Google Visualization,下图由谷歌提供，显示了两组数据（茶、咖啡）。为了显示5个数据集，我一直在尝试使用，但失败了。我尝试更改button.onclick函数和button.value。我已附上初始代码（2个数据集）和修改后的代码（5个数据集） 初步看法： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=
<!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>
点击我！
谷歌可视化API示例
load（'visualization'，'1'，{packages:['corechart']}）；
//一些原始数据（不一定准确）
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, 569.6]];
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, 569.6]];
//创建并填充数据表。
var数据=[]；
数据[0]=google.visualization.arrayToDataTable（rowData1）；
数据[1]=google.visualization.arrayToDataTable（rowData2）；
变量选项={
宽度：400，
身高：240，
vAxis:{title:“Cups”}，
哈克斯：{标题：“月”}，
序列类型：“条”，
系列：{5:{type:“line”}，
动画：{
持续时间：1000，
放松：“退出”
},
};
无功电流=0；
//创建并绘制可视化。
var chart=new google.visualization.ComboChart（document.getElementById（'visualization'）；
var按钮=document.getElementById（'b1'）；
函数绘图图（）{
//在绘制图表时禁用该按钮。
button.disabled=true；
google.visualization.events.addListener（图表'ready'，
函数（）{
button.disabled=false；
button.value='切换到'+（当前？'Tea'：'Coffee'）；
});
选项['title']=“每月”+（当前的“咖啡”：“茶”）+“按国家生产”；
图表绘制（数据[当前]，选项）；
}
图纸（）；
button.onclick=函数（）{
电流=1-电流；
图纸（）；
}
<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>
点击我！
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（init）；
函数init（）{
var rowData1=[['学校'、'书籍'、'书籍章节'、'期刊文章'、'会议'、'平均']，
[《会计》，165938522998450]，
[《经济与商业科学》，13511205991268288]，
[Law'，15711675878070397]，
[WitsPlus（BCom）”，1391110615，968215]，
[“工商管理研究生院”，1366916291026366]；
var rowData2=[['学校'、'书籍'、'书籍章节'、'期刊文章'、'会议'、'平均']，
[《建筑与规划》，122638722998450]，
[《化学与冶金工程》，10011208991268288]，
[《土木与环境工程》，183167487207397]，
[《建筑经济与管理》，2005103151068215]，
[《电气与信息工程》，1391110615968215]，
[《机械、工业和航空工程》，165938522998450]，
[《采矿工程》，123、491、829、826、366]；
var rowData3=[['学校'，'书籍'，'书籍章节'，'期刊文章'，'会议'，'平均']，
[《解剖学》，122638722998450]，
[《临床医学》，32011202791268288]，
[《口腔健康科学》，183167487207397]，
[“病理学”，200560315679215]，
[《生理学》，13990061550215]，
[《公共卫生》，165938522998450]，
[《治疗科学》，183500487207397]，
[“健康科学教育中心”，1391110615968215]，
[“研究生学习和研究中心办公室”，123、491、829、826、366]；
var rowData4=[['学校'、'书籍'、'书籍章节'、'期刊文章'、'会议'、'平均']，
['Wits艺术学院'，122638722998450]，
['Wits教育学校'，32011202791268288]，
[“人文研究生中心”，183167487207397]，
[《人类与社区发展》，200560315679215]，
[《文学、语言和媒体》，13990061550215]，
[《社会科学》，165938522998450]，
['WitsPlus（工作世界文学学士）'123491829826366]；
var rowData5=[['学校'、'书籍'、'书籍章节'、'期刊文章'、'会议'、'平均']，
[《生物与生命科学》，122638722998450]，
[《动植物与环境科学》，32011202791268288]，
[《分子与细胞生物学》，183167487207397]，
[Chemistry'，200560315679215]，
[《物理学》，13990061550215]，
[《地理、考古学和环境研究》，165938522998450]，