文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何处理jqvmap未定义的值

问如何处理jqvmap未定义的值
EN

Stack Overflow用户
提问于 2015-10-27 05:28:55
回答 2查看 710关注 0票数 0

我正在使用jqvmap显示地图系列(ifthq.com scroll low left)。在美国地图上，我有两个值状态: LA和OH，都等于1。

用于输入jqvmap的JSON是：{"OH":1,"LA":1}。

地图显示，但没有正确填写。我的假设是线性normalizeFunction会在最大时产生两种状态，其余的在最小时产生。事实并非如此。

既然美国地图是通过50 elements的，而且数据只有两个，我如何在jqvmap中将“默认”数据设置为零？换句话说，undefined states would be equal to zero?

谢谢。

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

代码语言：javascript
复制
@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：

代码语言：javascript
复制
<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代码：

代码语言：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函数是索引对象中的一个方法：

代码语言：javascript
复制
var Index = function() {....

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

javascript
jquery
jqvmap
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-10-29 15:45:40

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

代码语言：javascript
复制
var newData = {};
for (var key in mapdata)
    newData[key.toLowerCase()] = '#0071A4';
map.vectorMap('set', 'colors', newData);

这里有一个工作样本。

编辑

我还找到了不同的解决方案：

代码语言：javascript
复制
var arrStates = [];
for (var key in mapdata)
    arrStates.push(key);
map.vectorMap('set', 'colors', arrStates, '#0071A4');
票数 1
EN

Stack Overflow用户

发布于 2015-10-29 17:00:38

您可以使用$.extend()组合两个对象，如果一个对象存在于另一个对象中，则覆盖它们的值(这里的文件)。例如：

代码语言：javascript
复制
var mySmallData = {
  "OH": 1,
  "LA": 1
};
var DEFAULTS = {
  "OH": 0,
  "LA": 0,
  "WA": 0,
  "ID": 0,
  // etc.
};

var fullData = $.extend({}, DEFAULTS, mySmallData);

fullData现在将包含：

代码语言：javascript
复制
{
  "OH": 1,
  "LA": 1,
  "WA": 0,
  "ID": 0
}

这样，您就有了一个拥有所有缺省值的对象，您就不必去处理它了。稀疏对象可以有尽可能少的数据点，并且它总是被扩展到完整的状态集。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/33360530

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档