javascript - Google GeoCharts 数据未加载

Question

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

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

其他所有内容，例如传递给函数的 displayMode (标记)变量和 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});