javascript - 使用 jVectorMap/JQVMap 进行数据可视化

Question

我正在尝试制作一个 Jquery Vector Map(为此，我尝试了 jVectorMap，现在我正在“玩”JQVMap，但我无法制作任何数据可视化。我只是想包括我的“accountbalanceData”并将数据可视化，例如 -20(%) =“red”、-10(%) =“lightred”、0(%) =“blue”等。但我得到的是一个“空 map ”(悬停和点击工作)。

头

<!-- jQuery -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<!-- JQVMap -->
    <script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.min.js"></script>
    <!--<script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.js"></script>-->
    <script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.world.js"></script>
    <script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.sampledata.js"></script>
    <script type="text/javascript" src="/newsite/js/jvectormap/gdp-data.js"></script>

HTML:

    <div id="vmap" style="width: 600px; height: 400px;"></div>

数据

我从 http://www.imf.org 中获取了这些数据我在所有 184 个国家/地区的“GDP 百分比”中查询“经常账户余额”。但它不适用于 accountbalanceData(我猜是因为减号)。

      var accountbalanceData = {
      "AF": -1.086,
      "AL": -13.237,
      "DZ": 9.984,
      "AO": 9.717,
      "AG": -13.686,
      "AR": -0.701,
      "AM": -11.043,
      "AU": -4.614,
      "AT": 1.374,
      "AZ": 21.789,
        ...};

      var gdpData = {
       "OM": 53.78,
       "PK": 174.79,
       "PA": 27.2,
       "PG": 8.81,
       "PY": 17.17,
       "PE": 153.55,
       "PH": 189.06,
       "PL": 438.88,
       "PT": 223.7,
        ...};

CSS:

    .jqvmap-label
    {
        position: absolute;
        display: none;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background: #292929;
        color: white;
        font-family: sans-serif, Verdana;
        font-size: smaller;
        padding: 3px;
    }

    .jqvmap-zoomin, .jqvmap-zoomout
    {
        position: absolute;
        left: 10px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background: #000000;
        padding: 3px;
        color: white;
        width: 10px;
        height: 10px;
        cursor: pointer;
        line-height: 10px;
        text-align: center;
    }

    .jqvmap-zoomin
    {
        top: 10px;
    }

    .jqvmap-zoomout
    {
        top: 30px;
    }

    .jqvmap-region
    {
      cursor: pointer;
    }

    .jqvmap-ajax_response
    {
      width: 100%;
      height: 500px;
    }

Javascript:

    <script>
    $(function(){
        var max = 0,
            min = Number.MAX_VALUE,
            cc,
            startColor = [200, 238, 255],
            endColor = [0, 100, 145],
            mycolors = {},
            hex;

            //find maximum and minimum values
            for (cc in sample_data)
            {
                if (parseFloat(sample_data[cc]) > max)
                {
                    max = parseFloat(sample_data[cc]);
                }
                if (parseFloat(sample_data[cc]) < min)
                {
                    min = parseFloat(sample_data[cc]);
                }
            };

            //set colors according to values of GDP
            for (cc in sample_data)
            {
                if (sample_data[cc] > 0)
                {
                    mycolors[cc] = '#';
                    for (var i = 0; i<3; i++)
                    {
                        hex = Math.round(startColor[i]
                            + (endColor[i]
                            - startColor[i])
                            * (gdpData[cc] / (max - min))).toString(16);

                        if (hex.length == 1)
                        {
                            hex = '0'+hex;
                        }

                        mycolors[cc] += (hex.length == 1 ? '0' : '') + hex;
                    }
                }
            };

//Map initializing

            jQuery('#vmap').vectorMap({
                map: 'world_en',
                //backgroundColor: '#a5bfdd', //Color of the background ("Ocean's")
                borderColor: '#818181', //Color of the country borders
                borderOpacity: 0.15, //Border thickness
                borderWidth: 1,
                //color: 'white', //Country color
                series: {
                    regions: [{
                        values: sample_data,
                        scale: ['#C8EEFF', '#0071A4'],
                        normalizeFunction: 'polynomial',
                    }]
                },
                colors: mycolors,
                hoverOpacity: 0.7,
                hoverColor: false,
                //scaleColors: ['#b6d6ff', '#005ace'],
                onRegionClick: function(element, code, region)
                {
                var message = 'You clicked "'
                    + region
                    + '" which has the code: '
                    + code.toUpperCase();

                alert(message);
                }
            });
    });
    </script>

Answer 1

您可以在此处查看 jvectormap 的文档:

jvectormap documentation

您的代码将如下所示:

$('#vmap').vectorMap({
            map: 'world_mill_en',
            regionStyle: //your initial values (including hover)
            series: {
                regions: [{
                    values: accountbalanceData,
                    scale: ['#C8EEFF', '#0071A4'],
                    normalizeFunction: 'polynomial',
                }]
            },
            onRegionClick: function(element, code, region)
            {
            var message = 'You clicked "'
                + region
                + '" which has the code: '
                + code.toUpperCase();

            alert(message);
            }
        });