Javascript Google未加载数据

下面是所附代码中的问题。我有一个表单div，旁边有一个表单div，在后台有多个CSV文档在管理数据。目标是在按下

#showButton

时，通过表单div中当前选择的过滤器加载数据

/*

Coded by : Roland Stojkoski;

Contact : roland.roland.roli@gmail.com

*/



/* 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;
}

因此，当加载页面时，将加载“常规”CSV文档以表示数据，当用户希望通过当前过滤器选择查看数据时，当用户按下

#showButton

时，将加载其他CSV文档。但问题是，只有当按下两次

#showButton

时，才会发生这种情况，而第二次过滤器中没有任何变化

传递给函数的

displayMode

（markers）变量和colorForSex变量等所有其他变量都会加载并应用到GeoCharts div，但CSV文件和所有数据只会在第二次按下按钮时加载（再次-第二次按下按钮时不更改过滤器）

/*
编码人：罗兰·斯托伊科斯基；
联系人：罗兰，罗兰。roli@gmail.com
*/
/*CSV处理-启动*/
var processedData=[]；
var newData=[]；
var region=$（'select[name=“region”]选项：selected'）.val（）；
var sex=$（'select[name=“sex”]选项：selected'）.val（）；
var age=$（'select[name=“age”]选项：selected'）.val（）；
var permOrNot=$（'select[name=“permOrNot”]选项：selected'）.val（）；
var permSelect=$（'select[name=“permSelect”]选项：selected'）.val（）；
getFile（'csv/Residence_All.csv'）；
/*CSV处理-结束*/
var图；
var数据；
$（文档）.ready（函数（）{
/*谷歌图表*/
google.charts.load（'current'{
“包”：[“地球艺术”]，
“mapsApiKey”：“Aizasybhbggo3wq70fgwwjwvcchnqm0e4r2g_l8”，
“回调”：DrawRegionMap
});
google.charts.setOnLoadCallback（DrawRegionMap）；
函数drawRegionsMap（）{
region=$（'select[name=“region”]选项：selected'）.val（）；
data=google.visualization.arrayToDataTable（processedData）；
变量选项={
地区:地区,，
背景颜色：“无”，
图表区：{宽度：“100%”，高度：“100%”，
颜色轴：{colors:['#ddd'，'#ff1a1a']}，
datalessRegionColor:“白色”，
显示模式：“标记”，
图例：{
数字格式：‘.##’，
文本样式：{
fontName:“Nunito Sans”，
颜色：“#ff1a1a”，
尺寸：14，
}
}   
};
chart=新的google.visualization.geogorart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}
$（“#显示按钮”）。单击（函数（）{
如果（$（'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'）；
}否则如果（$（'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（函数（）{
if（$（'select[name=“region”]option:selected'）.val（）=='world'）{
$（'select[name=“age”]”）。fadeIn（）；
$（'select[name=“permOrNot”]）.fadeOut（）；
if（$（'select[name=“sex”]选项：selected'）.val（）！='all'）{
$（'select[name=“age”]）.fadeOut（）；
}否则{
$（'select[name=“age”]”）。fadeIn（）；
}
if（$（'select[name=“age”]选项：selected'）.val（）！='all'）{
$（'select[name=“sex”]）.fadeOut（）；
}否则{
$（'select[name=“sex”]”）。fadeIn（）；
}
}else if（$（'select[name=“region”]option:selected'）。val（）=='CH'）{
$（'select[name=“age”]）.fadeOut（）；
$（'select[name=“permOrNot”]）.fadeIn（）；
如果（$（'select[name=“permOrNot”]选项：selected'）。val（）=='perm'）{
$（'select[name=“permSelect”]）.fadeIn（）；
}否则{
$（'select[name=“permSelect”]）.fadeOut（）；
}
}
});
$（文档）.scrollTop（0）；
$（“#菜单”）.velocity({
排名：0
}, 900);
$（'#content>p'）。速度({
不透明度：1
}，1500，‘线性’；
$（“#类别”）。速度({
保证金余额：2%
}，900，'线性'；
$（'chart#u div'）。速度({
不透明度：1
}，900，'线性'；
setTimeout（introAnimation，800）；
函数introAnimation（）{
$（“#徽标”）.velocity({
不透明度：1
}，900，'线性'；
$（'nav>ul>li'）。速度({
不透明度：1
}，900，'线性'；
$（“#数据”）。速度({
不透明度：1
}，900，'线性'；
$（“#社会”）.速度({
不透明度：1
}，900，'线性'；
}
$（'.facebook，.facebook>i'）。悬停（函数（）{
$（'.facebook>i'）.css（'color'，'3b5998'）；
});
$（'.facebook'）.mouseout（函数（）{
$（'.facebook>i'）.css（'color'，'#ddd'）；
});
$（'.facebook>i'）.mouseout（函数（）{
$（'.facebook>i'）.css（'color'，'3b5998'）；
});
$（'.twitter、.twitter>i'）.hover（函数（）{
$（'.twitter>i'）.css（'color'，'1da1f2'）；
});
$（'.twitter'）.mouseout（函数（）{
$（'.twitter>i'）.css（'color'，'#ddd'）；
});
$（'.twitter>i'）.mouseout（函数（）{
$（'.twitter>i'）.css（'color'，'1da1f2'）；
});
$（'.googlePlus.googlePlus>i'）。悬停（函数（）{
$（'.googlePlus>i'）.css（'color'，'e53935'）；
});
$（'.googlePlus'）.mouseout（函数（）{
$（'.googlePlus>i'）.css（'color'，'#ddd'）；
<!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 &copy; 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>