HTML X JavaScript X Google Charts - 根据单选按钮选择更改图表
HTML X JavaScript X Google Charts - Change chart according to radio button selection
我正在尝试创建一个HTML页面，人们可以根据从4个中选择的单选按钮可视化使用Google图表库绘制的图表。我定义了单选按钮以及图表调用。但是，我遇到了几个问题。当我第一次打开页面时，它没有像它应该的那样显示默认选择的单选选项值的图表（在本例中为"全局"，然后调用"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>
switch语句在每个case
后都需要一个break如果没有break，所有图表，从选定的开始，都被绘制
出来生成序列中的最后一个图表...
此外，建议每次页面加载
调用setOnLoadCallback一次在下面的工作示例中，它在 load 语句中设置...
google.charts.load('current', {
callback: checkValue,
packages: ['corechart', 'bar']
});
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('chartdest'));
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('chartdest'));
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('chartdest'));
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('chartdest'));
chart.draw(data, options);
}
function checkValue()
{
switch(document.test.field.value)
{
case "global":
drawGlobal();
break;
case "gender":
drawBasic();
break;
case "location":
drawBasic2();
break;
case "age":
drawBasic3();
break;
}
}#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;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<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>相关文章：
- 如果选择单选按钮，则显示字段
- 选择单选按钮更新2个输入字段
- 如果选择单选按钮，则显示表单
- 选择单选按钮时显示更新按钮
- 选择单选按钮时显示或隐藏窗体
- 如何使用Greasemonkey自动选择单选按钮
- 如何通过单击选项而不是实际按钮本身来选择单选按钮
- JavaScript - 如果选中任何复选框，请选择单选按钮
- 无法在 jquery 中选择单选按钮
- 需要在选择单选按钮上启用提交按钮
- 取消选择单选按钮
- JavaScript-一旦选择单选按钮，就会删除以前的字段集
- 如何在加载时通过jQuery选择单选按钮
- AngularJs:默认情况下未选择单选按钮
- 我需要在选择单选按钮时显示一个下拉框
- 单击时取消选择单选按钮
- 选择单选按钮或下拉菜单项时自动更新PHP变量
- 如何在选择单选按钮后启用提交按钮
- 如何防止用户为每种情况选择单选按钮
- 使用 Json 如何根据数据库中的值选择单选按钮
