如何处理jqvmap未定义的值

how to handle jqvmap undefined values

本文关键字:jqvmap 未定义 处理 何处理      更新时间:2023-09-26

我使用jqvmap来显示地图系列(ifthq.com scroll low left)。在美国地图上,我有两个州的值:LA和OH,它们都等于1。

jqvmap的JSON格式为:{"OH":1,"LA":1} .

地图显示,但没有正确填充。我的假设是,线性normalizeFunction将导致两种状态在最大,其余的在最小。这不是情况。

由于US Map在50 elements上,数据只有两个,我如何将jqvmap中的"默认"数据设置为零?换句话说,undefined states would be equal to zero?

谢谢。

更新#1:问题代码:视图的定义。Mbrmap是数据拉取的结果:

@login_required
def index_view(request):
    enlisted = models.Subscription.objects.rankset("E").active().count()
    officer = models.Subscription.objects.rankset("O").active().count()
    civilian = models.Subscription.objects.rankset("C").active().count()
    lifer = models.Subscription.objects.lifer().active().count()
    subscriptions = models.Subscription.objects.all().order_by("-Modified")
    mbrcnt = models.Member.objects.values('State').annotate(c=Count('State')).exclude(State='')
    mbrcnt2 = models.Member.objects.values('Country').annotate(c=Count('Country')).exclude(Country='')
    mbrmap = dict([(type_and_count['State'], type_and_count['c']) for type_and_count in mbrcnt])
    mbrmap2 = dict([(type_and_count['Country'], type_and_count['c']) for type_and_count in mbrcnt2])
    mbrmap.update(mbrmap2)
    units = models.Unit.objects.values('Unit_name', 'Hull_type', 'Hull_number').annotate(c=Count('memberunit__Member'))
    context = {'mbrmap': mbrmap, 'enlisted': enlisted, 'officer': officer, 'civilian': civilian, 'lifer': lifer, 'units': units, 'Subscriptions': subscriptions}
    return render(request, 'index.html', context)
html:

<div class="portlet-body">
    <div id="region_statistics_loading">
        <img src="{% static "img/loading.gif" %}" alt="loading"/>
    </div>
    <div id="region_statistics_content" class="display-none">
        <div class="btn-toolbar margin-bottom-10">
            <div class="btn-group btn-group-circle" data-toggle="buttons">
                <a href="" class="btn grey-salsa btn-sm active">
                Members </a>
                <a href="" class="btn grey-salsa btn-sm">
                Units </a>
            </div>
            <div class="btn-group pull-right">
                <a href="" class="btn btn-circle grey-salsa btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                Select Region <span class="fa fa-angle-down">
                </span>
                </a>
                <ul class="dropdown-menu pull-right">
                    <li>
                        <a href="javascript:;" id="regional_stat_world">
                        World </a>
                    </li>
                    <li>
                        <a href="javascript:;" id="regional_stat_usa">
                        USA </a>
                    </li>
                    {% comment %}<li>
                        <a href="javascript:;" id="regional_stat_europe">
                        Europe </a>
                    </li>
                    <li>
                        <a href="javascript:;" id="regional_stat_russia">
                        Russia </a>
                    </li>
                    <li>
                        <a href="javascript:;" id="regional_stat_germany">
                        Germany </a>
                    </li>{% endcomment %}
                </ul>
            </div>
        </div>
        <div id="vmap_world" class="vmaps display-none">
        </div>
        <div id="vmap_usa" class="vmaps display-none">
        </div>
        {% comment %}<div id="vmap_europe" class="vmaps display-none">
        </div>
        <div id="vmap_russia" class="vmaps display-none">
        </div>
        <div id="vmap_germany" class="vmaps display-none">
        </div>{% endcomment %}
    </div>
</div>
<!-- PAGE LEVEL SPELLS -->
{% block PageSpells %}
    <!-- PLUGINS -->
    <script src="{% static "plugins/jqvmap/jqvmap/jquery.vmap.js" %}" type="text/javascript"></script>
    <script src="{% static "plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js" %}" type="text/javascript"></script>
    <script src="{% static "plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js" %}" type="text/javascript"></script>
    <script src="{% static "plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js" %}" type="text/javascript"></script>
    <script src="{% static "plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js" %}" type="text/javascript"></script>
    <script src="{% static "plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js" %}" type="text/javascript"></script>
    <script src="{% static "plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js" %}" type="text/javascript"></script>
    <!-- SPELLS -->
    <script src="{% static "js/index.js" %}" type="text/javascript"></script>
    <script src="{% static "plugins/uniform/jquery.uniform.min.js" %}" type="text/javascript"></script>
{% endblock %}
<!-- PAGE JQUERY -->
{% block Jquery %}
    var mapdata = {{ mbrmap|safe }};
    Index.init();
    Index.initCmdSelect();
    Index.initJQVMAP(mapdata); // init index page's custom scripts
{% endblock %}

javascript代码:

initJQVMAP: function (mapdata) {
    if (!jQuery().vectorMap) {
        return;
    }
    var showMap = function (name) {
        jQuery('.vmaps').hide();
        jQuery('#vmap_' + name).show();
    }
    var setMap = function (name) {
        var data = {
            map: 'world_en',
            backgroundColor: null,
            borderColor: '#333333',
            borderOpacity: 0.5,
            borderWidth: 1,
            color: '#c6c6c6',
            enableZoom: true,
            hoverColor: '#c9dfaf',
            hoverOpacity: null,
            values: mapdata,
            normalizeFunction: 'linear',
            scaleColors: ['#C8EEFF', '#0071A4'],
            selectedColor: '#c9dfaf',
            selectedRegion: null,
            showTooltip: true,
            onLabelShow: function (event, label, code) {
            },
            onRegionOver: function (event, code) {
                if (code == 'ca') {
                    event.preventDefault();
                }
            },
            onRegionClick: function (element, code, region) {
                if (typeof mapdata[code.toUpperCase()] === 'undefined') {
                    var sval = 0;
                } else {
                    var sval = mapdata[code.toUpperCase()]
                }
                var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase() + ' and value:  ' + sval;
                alert(message);
            }
        };
        data.map = name + '_en';
        var map = jQuery('#vmap_' + name);
        if (!map) {
            return;
        }
        map.width(map.parent().parent().width());
        map.show();
        map.vectorMap(data);
        map.hide();
    }
    setMap("world");
    setMap("usa");
    //setMap("europe");
    //setMap("russia");
    //setMap("germany");
    showMap("world");
    jQuery('#regional_stat_world').click(function () {
        showMap("world");
    });
    jQuery('#regional_stat_usa').click(function () {
        showMap("usa");
    });
    jQuery('#regional_stat_europe').click(function () {
        showMap("europe");
    });
    jQuery('#regional_stat_russia').click(function () {
        showMap("russia");
    });
    jQuery('#regional_stat_germany').click(function () {
        showMap("germany");
    });
    $('#region_statistics_loading').hide();
    $('#region_statistics_content').show();
},
注意,initJQVMAP函数是索引对象中的一个方法:
var Index = function() {....

Index.initJQVMAP(mapdata);函数调用初始化。谢谢。

您可以尝试在创建地图后更改颜色:

var newData = {};
for (var key in mapdata)
    newData[key.toLowerCase()] = '#0071A4';
map.vectorMap('set', 'colors', newData);

这里有一个工作样本。

编辑

我还发现了这个不同的解决方案:

var arrStates = [];
for (var key in mapdata)
    arrStates.push(key);
map.vectorMap('set', 'colors', arrStates, '#0071A4');

您可以使用$.extend()组合两个对象,如果其中一个对象的值存在于另一个对象中,则覆盖其中一个对象的值(请参阅此处的文档)。例如:

var mySmallData = {
  "OH": 1,
  "LA": 1
};
var DEFAULTS = {
  "OH": 0,
  "LA": 0,
  "WA": 0,
  "ID": 0,
  // etc.
};
var fullData = $.extend({}, DEFAULTS, mySmallData);

fullData现在包含:

{
  "OH": 1,
  "LA": 1,
  "WA": 0,
  "ID": 0
}

这样,你就有了一个对象,它拥有你所有的默认值,而且你永远不需要弄乱它。您的稀疏对象可以有尽可能少的数据点,并且它总是会扩展到完整的状态集。