Javascript 用jvectoramap/JQVMap实现数据可视化

我正在尝试制作一个Jquery向量映射（为此我尝试了jVectorMap，现在我正在“玩”JQVMap，但我无法进行任何数据可视化。 我只想包括我的“accountbalanceData”，并可视化数据，如-20（%）=“红色”、-10（%）=“浅红色”、0（%）=“蓝色”等。 但我得到的是一张“空地图”（悬停和点击）

头部

<!-- 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>

CSS:

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

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

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

Javascript:

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

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

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

$（函数（）{
var max=0，
最小值=数字。最大值，
复写的副本，
startColor=[200238255]，
endColor=[0100145]，
mycolors={}，
十六进制；
//查找最大值和最小值
用于（样本_数据中的cc）
{
if（parseFloat（样本数据[cc]）>max）
{
max=parseFloat（样本数据[cc]）；
}
if（parseFloat（样本数据[cc]）0）
{
mycolors[cc]=“#”；
对于（var i=0；i，您可以在此处遵循jvectormap的文档：


您的代码如下所示：

$('#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);
            }
        });

这是给jvectormap的，如果你只想用jqvmap删除相应的标签并编辑你的标题，我会删除这个答案。