【发布时间】：2016-11-13 15:22:08
【问题描述】：
我正在尝试创建一个 HTML 页面，在该页面中，人们可以根据从 4 个中选择的单选按钮来可视化使用 Google Charts 库绘制的图表。我将单选按钮与图表调用一起定义。但是，我有几个问题。当我第一次打开页面时，它没有显示默认选择的单选选项值的图表（在这种情况下为“全局”，然后调用“drawGlobal（）”），就像它应该的那样。当我尝试选择另一个选项时，它会一遍又一遍地显示相同的图表（使用“drawBasic3()”绘制），而不是打开相应的图表。如果有人能帮我解决这个问题，我将不胜感激！
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Global Sentiment Page V2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages: ['corechart', 'bar']});
//google.charts.setOnLoadCallback(checkValue);
function drawGlobal() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Sentiment');
data.addRows([
['31/01/2016', 20],
['28/02/2016', 35],
['31/03/2016', 40],
['30/04/2016', 55],
['31/05/2016', 60],
['30/06/2016', 75],
['31/07/2016', 80],
['31/08/2016', 95],
['30/09/2016', 100]
]);
var options = {
title: 'Average Sentiment Over Time',
colors : [ '#0000FF', '#00FFFF' ],
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Sentiment',
viewWindow : {
max : 0,
min : 100
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div_global'));
chart.draw(data, options);
}
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Male');
data.addColumn('number', 'Female');
data.addRows([
['31/01/2016', 10, 5],
['28/02/2016', 25, 15],
['31/03/2016', 30, 20],
['30/04/2016', 45, 35],
['31/05/2016', 50, 40],
['30/06/2016', 65, 55],
['31/07/2016', 70, 60],
['31/08/2016', 85, 75],
['30/09/2016', 100, 90]
]);
var options = {
title: 'Average Sentiment Over Time By Gender',
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Sentiment'
},
colors: ['#00008B', '#0000FF'],
legend: 'bottom'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function drawBasic2() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'East');
data.addColumn('number', 'West');
data.addRows([
['31/01/2016', 2, 8],
['28/02/2016', 10, 16],
['31/03/2016', 18, 24],
['30/04/2016', 26, 31],
['31/05/2016', 34, 39],
['30/06/2016', 42, 47],
['31/07/2016', 50, 55],
['31/08/2016', 58, 63],
['30/09/2016', 66, 71]
]);
var options = {
title: 'Average Sentiment Over Time By Location',
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Sentiment'
},
colors: ['#006400', '#008000'],
legend: 'bottom'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
function drawBasic3(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', '0-30');
data.addColumn('number', '31-60');
data.addColumn('number', '61+');
data.addRows([
['31/01/2016', 2, 8, 10],
['28/02/2016', 10, 16, 18],
['31/03/2016', 18, 24, 26],
['30/04/2016', 26, 31, 33],
['31/05/2016', 34, 39, 42],
['30/06/2016', 42, 47, 49],
['31/07/2016', 50, 55, 57],
['31/08/2016', 58, 63, 65],
['30/09/2016', 66, 71, 73]
]);
var options = {
title: 'Average Sentiment Over Time By Age Range',
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Sentiment'
},
colors: ['#FF7F50', '#FA8072', '#FFA500'],
legend: 'bottom'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div3'));
chart.draw(data, options);
}
function checkValue()
{
switch(document.test.field.value)
{
case "global":
document.getElementById("chartdest").innerHTML = "<div id ='chart_div_global'></div>";
google.charts.setOnLoadCallback(drawGlobal);
drawGlobal();
case "gender":
document.getElementById("chartdest").innerHTML = "<div id ='chart_div'></div>";
google.charts.setOnLoadCallback(drawBasic);
drawBasic();
case "location":
document.getElementById("chartdest").innerHTML = "<div id ='chart_div2'></div>";
google.charts.setOnLoadCallback(drawBasic2);
drawBasic2();
case "age":
document.getElementById("chartdest").innerHTML = "<div id ='chart_div3'></div>";
google.charts.setOnLoadCallback(drawBasic3);
drawBasic3();
}
}
</script>
<style>
#global{
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
input[type=radio] {
margin-left: 50px;
}
</style>
</head>
<body>
<center>
<div id="global" class = "container">
<h2 align="left">Charts</h2>
<br></br>
<form name='test'>
<label>Choose type:</label>
<input type="radio" name="field" value="global" onChange="checkValue()" checked>Global
<input type="radio" name="field" value="gender" onChange="checkValue()">Gender
<input type="radio" name="field" value="location" onChange="checkValue()">Location
<input type="radio" name="field" value="age" onChange="checkValue()">Age Range
</form>
<br></br>
<div id='chartdest'>
</div>
</div>
</center>
</body>
【问题讨论】：
标签： javascript html google-visualization