Google GeoCharts数据未加载

Question

所以这是附加代码中的问题。我有一个GeoCharts div，旁边有一个表单div，后台有多个管理数据的CSV文档。目标是在按下#showButton时，通过表单div中当前选择的过滤器加载数据。

因此，当加载页面时，加载“常规”CSV文档以表示数据，当用户想要通过当前过滤器选择查看数据时，当用户按下#showButton时，将加载其他CSV文档。但问题是只有当#showButton被按下两次而过滤器没有任何变化时才会发生这种情况。

传递给函数的displayMode（markers）变量以及colorForSex变量加载并应用于GeoCharts div的其他所有内容，但CSV文件和所有数据仅在第二次加载时才加载按下按钮（再次 - 第二次按下时不更改过滤器）。

/*

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

这是我的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 &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>

Answer 1

我找到了解决方案。它隐藏在ajax设置设置中。脚本文件开头的代码足以解决问题 - $.ajaxSetup({async:false});