1
4から選択したラジオボタンに従って、Google Chartsライブラリで描画されたグラフを視覚化できるHTMLページを作成しようとしています。ラジオボタンをチャートコールとともに定義します。しかし、私はいくつかの問題を抱えています。最初にページを開くと、デフォルトで選択されているラジオ・オプションの値（この場合は「global」、この場合は「drawGlobal（）」）が選択されているようなグラフは表示されません。私は別のオプションを選択しようとすると、対応するチャートを開くのではなく、同じチャートを繰り返し表示します（drawBasic3（）で描画されます）。誰かが私の周りを助けることができたら、私はそれを感謝します！ここでHTML X JavaScript X Googleグラフ - ラジオボタンの選択に応じてグラフを変更します。
はところで私のコードです：
<!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>
...
load文で設定されていることが機能するようになりました。ありがとう！ –