1
添付コードに問題があります。 GeoCharts divの横にフォームdivがあります。バックグラウンドでは、データを管理している複数のCSVドキュメントがあります。目標は、#showButtonが押されたときに、フォームdiv内の現在のフィルタ選択でデータをロードすることです。Google GeoChartsデータが読み込まれない
ページがロードされると、データを表すために「一般的な」CSVドキュメントがロードされます。ユーザが現在のフィルタ選択でデータを表示したいときは、ユーザが#showButtonを押すと、他のCSVドキュメントがロードされます。しかし、それは、#showButtonが2回押されたときにのみ起こり、何もフィルタを何も変えずに2回目です。
displayMode（マーカー）変数が関数に渡され、colorForSex変数がロードされてGeoCharts divに適用されますが、CSVファイルとすべてのデータは、ボタンが2回目にだけロードされます（もう一度 - 2回目の押下時にフィルタを変更することなく）。
/*
Coded by : Roland Stojkoski;
Contact : [email protected]
*/
/* CSV handling - START */
var processedData = [];
var newData = [];
var region = $('select[name="region"] option:selected').val();
var sex = $('select[name="sex"] option:selected').val();
var age = $('select[name="age"] option:selected').val();
var permOrNot = $('select[name="permOrNot"] option:selected').val();
var permSelect = $('select[name="permSelect"] option:selected').val();
getFile('csv/Residence_All.csv');
/* CSV handling - END */
var chart;
var data;
$(document).ready(function(){
/* Google Charts */
google.charts.load('current', {
'packages':['geochart'],
'mapsApiKey': 'AIzaSyBHggo3wq70fGWUJwvCCHNnQm0E4R2G_l8 ',
'callback': drawRegionsMap
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
region = $('select[name="region"] option:selected').val();
data = google.visualization.arrayToDataTable(processedData);
var options = {
region: region,
backgroundColor: 'none',
chartArea: { width: '100%', height: '100%' },
colorAxis: {colors: ['#ddd','#ff1a1a']},
datalessRegionColor: 'white',
displayMode: 'markers',
legend: {
numberFormat: '.##',
textStyle: {
fontName: 'Nunito Sans',
color: '#ff1a1a',
fontSize: 14,
}
}
};
chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
$('#showButton').click(function(){
if($('select[name="region"] option:selected').val() === 'world' && $('select[name="sex"] option:selected').val() === 'all' && $('select[name="age"] option:selected').val() === 'all'){
loadData('csv/Origin_All.csv', '#a80000', 'regions');
}else if ($('select[name="region"] option:selected').val() === 'world' && $('select[name="sex"] option:selected').val() === 'female'){
loadData('csv/Origin_Sex_Female.csv', '#ff9933', 'regions');
}else if ($('select[name="region"] option:selected').val() === 'CH'){
loadData('csv/Residence_All.csv', '#a80000', 'text');
}
});
$('select').change(function(){
if($('select[name="region"] option:selected').val() === 'world'){
$('select[name="age"]').fadeIn();
$('select[name="permOrNot"]').fadeOut();
if($('select[name="sex"] option:selected').val() != 'all'){
$('select[name="age"]').fadeOut();
}else{
$('select[name="age"]').fadeIn();
}
if($('select[name="age"] option:selected').val() != 'all'){
$('select[name="sex"]').fadeOut();
}else{
$('select[name="sex"]').fadeIn();
}
}else if($('select[name="region"] option:selected').val() === 'CH'){
$('select[name="age"]').fadeOut();
$('select[name="permOrNot"]').fadeIn();
if($('select[name="permOrNot"] option:selected').val() === 'perm'){
$('select[name="permSelect"]').fadeIn();
}else{
$('select[name="permSelect"]').fadeOut();
}
}
});
$(document).scrollTop(0);
$('#menu').velocity({
top: 0
}, 900);
$('#content > p').velocity({
opacity: 1
}, 1500, 'linear');
$('#categories').velocity({
marginLeft: '2%'
},900, 'linear');
$('#chart_div').velocity({
opacity: 1
},900, 'linear');
setTimeout(introAnimation, 800);
function introAnimation() {
$('#logo').velocity({
opacity: 1
}, 900, 'linear');
$('nav > ul > li').velocity({
opacity: 1
}, 900, 'linear');
$('#data').velocity({
opacity: 1
}, 900, 'linear');
$('#social').velocity({
opacity: 1
}, 900, 'linear');
}
$('.facebook, .facebook > i').hover(function(){
$('.facebook > i').css('color', '#3b5998');
});
$('.facebook').mouseout(function(){
$('.facebook > i').css('color', '#ddd');
});
$('.facebook > i').mouseout(function(){
$('.facebook > i').css('color', '#3b5998');
});
$('.twitter, .twitter > i').hover(function(){
$('.twitter > i').css('color', '#1da1f2');
});
$('.twitter').mouseout(function(){
$('.twitter > i').css('color', '#ddd');
});
$('.twitter > i').mouseout(function(){
$('.twitter > i').css('color', '#1da1f2');
});
$('.googlePlus, .googlePlus > i').hover(function(){
$('.googlePlus > i').css('color', '#e53935');
});
$('.googlePlus').mouseout(function(){
$('.googlePlus > i').css('color', '#ddd');
});
$('.googlePlus > i').mouseout(function(){
$('.googlePlus > i').css('color', '#e53935');
});
/* Show button - End */
});
function loadData(file, colorForSex, marker){
var region = $('select[name="region"] option:selected').val();
getFile(file);
var data = google.visualization.arrayToDataTable(processedData);
var options = {
region: region,
backgroundColor: 'none',
chartArea: { width: '100%', height: '100%' },
colorAxis: {colors: ['#ddd', colorForSex]},
datalessRegionColor: 'white',
displayMode: marker,
legend: {
numberFormat: '.##',
textStyle: {
fontName: 'Verdana',
color: '#ff1a1a',
fontSize: 14
}
}
};
chart.draw(data, options);
chart.draw(data, options);
}
function getFile(fileUrl){
$.get(fileUrl+'?q='+Math.random(), function(data) {
processedData = $.csv.toArrays(data);
var j = 1;
for (var i = 1; i < processedData.length; i++) {
for(var k = 0; k < processedData[i][j].length; k++){
if(processedData[i][j].charAt(k) == ','){
processedData[i][j]=processedData[i][j].substring(0,k)+processedData[i][j].substring(k+1,processedData[i][j].length-1);
}
}
processedData[i][j] = parseFloat(processedData[i][j]);
}
}, 'text');
return processedData;
}
そして、ここでは、私は解決策を見つけた私のHTMLコード
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:900|Roboto:400,700"/>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
<title>Facts About Migration | Home</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery.csv.min.js"></script>
<script type="text/javascript" src="velocity.min.js"></script>
<script type="text/javascript" src="velocity.ui.min.js"></script>
<!-- Fav Icon -->
<link rel="apple-touch-icon" sizes="57x57" href="images/favIco/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favIco/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favIco/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favIco/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favIco/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favIco/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favIco/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favIco/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favIco/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/favIco/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favIco/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favIco/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favIco/favicon-16x16.png">
<link rel="manifest" href="images/favIco/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="images/favIco/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script type="text/javascript" src="script.js"></script>
<!-- Fav Icon - End -->
</head>
<body>
<div id="menu">
<div id="logo">
<a href="#"><img id="logoImg" src="images/logo.png"/></a>
</div>
<ul>
<li class="navLi"><a class="nav" href="#" id="activeNav">HOME</a></li>
<li class="navLi"><a class="nav" href="#">ABOUT US</a></li>
<li class="navLi"><a class="nav" href="#">SPONSORS</a></li>
<li class="navLi"><a class="nav" href="#">CONTACT US</a></li>
<div id="socialDiv">
<li class="facebook social"><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
<li class="twitter social"><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
<li class="googlePlus social"><a href="#"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li>
</div>
</ul>
</div>
<div id="mainApp">
<main>
<form name="categories" id="categories">
<select name="region">
<option value="world" selected>Show All</option>
<option value="CH">Switzerland</option>
</select>
<select name="sex">
<option value="all" selected>Sex (Both)</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select name="age">
<option value="all" selected>Age (All)</option>
<option value="0-14">0 - 14</option>
<option value="15-19">15 - 19</option>
<option value="20-39">20 - 39</option>
<option value="40-64">40 - 64</option>
<option value="65-79">65 - 79</option>
<option value="80+">80+</option>
</select>
<select name="permOrNot">
<option value="all">Permanent and Non permanent
Foreign residents</option>
<option value="perm">Permanent foreign resident population</option>
<option value="not">Non permanent
Foreign residents </option>
</select>
<select name="permSelect">
<option value="all">All Permanent foreign resident population</option>
<option value="short">Short-term residents (L)</option>
<option value="residents">Residents (B)</option>
<option value="settled">Settled (C)</option>
</select>
<input type="button" name="categoriesButton" id="showButton" value="SHOW ON MAP"/>
</form>
<div id="chart_div">
</div>
</main>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ipsum ut urna convallis elementum. Etiam a fringilla felis. Pellentesque iaculis eu turpis et placerat. Maecenas posuere rutrum turpis, non cursus justo. Vivamus vestibulum tincidunt felis et elementum. Duis dapibus interdum leo quis euismod. Nulla ullamcorper elementum felis et malesuada. Integer pharetra sem vel fermentum gravida. Ut facilisis placerat pellentesque.</p>
<p>Vestibulum maximus arcu non est luctus, sit amet pharetra lorem consectetur. Duis vitae risus ac metus sagittis gravida. Aenean vulputate magna ac leo feugiat ornare. Sed laoreet nulla vel nibh blandit, sed mollis elit placerat. Ut vel diam finibus, lacinia lectus id, iaculis nisi. Sed hendrerit dui risus, a dictum purus varius a. Curabitur congue, mi eget ullamcorper bibendum, odio nisi egestas nunc, venenatis rutrum magna ipsum ac purus.</p>
</div>
<div class="windowBox box1">
</div>
<footer>
<a href="#">
<div class="sponsors">
<img src="images/logoExample.png"/>
</div>
</a>
<a href="#">
<div class="sponsors">
<img src="images/logoExample.png"/>
</div>
</a>
<a href="#">
<div class="sponsors">
<img src="images/logoExample.png"/>
</div>
</a>
<a href="#">
<div class="sponsors">
<img src="images/logoExample.png"/>
</div>
</a>
<a href="#">
<div class="sponsors">
<img src="images/logoExample.png"/>
</div>
</a>
</footer>
<div id="bottom">
<ul id="bottomLeft">
<li>Copyright © 2017. All rights reserved.</li>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul id="bottomRight">
<a href="#" class="facebookFooter"><li class="facebookFooter"><i class="fa fa-facebook-square facebookFooter" aria-hidden="true"></i></li></a>
<a href="#" class="twitterFooter"><li class="twitterFooter"><i class="fa fa-twitter-square twitterFooter" aria-hidden="true"></i></li></a>
<a href="#" class="googlePlusFooter"><li class="googlePlusFooter"><i class="fa fa-google-plus-square googlePlusFooter" aria-hidden="true"></i></li></a>
</ul>
</div>
</body>
</html>
あなたは –
にだけでなく、私はそれはです私の元の答え –
@halferを編集した@WilliamValhakisをあなたのhtmlとCSVデータを追加することができますあなたの中心的な問題が何であるかは少し不明です。もう一度質問でそれを拡大できますか？あなたは何が起こったのか、実際に何をしたいのですか？ （あなたの追加資料に余分なテキストがありましたが、おそらくそれを追加しますか？） –