如何处理jqvmap未定义的值

时间：2015-10-27 05:28:55

标签： javascript jquery jqvmap

我正在使用{"OH":1,"LA":1}来显示地图系列50 elements。在美国地图上，我有两个状态值：LA和OH，都等于1.

用于提供jqvmap的JSON是：jqvmap。

地图显示，但未正确填充。我的假设是线性normalizeFunction将导致两个状态为最大值，其余为最小值。事实并非如此。

由于美国地图超过undefined states would be equal to zero?，且数据只有两个，我该如何设置＆＃34;默认＆＃34; @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) 中的数据为零？换句话说，<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 %}

感谢。

更新＃1：问题代码： 查看定义。 mbrmap是数据拉取的结果：

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();
},

html：

initJQVMAP

javascript代码：

var Index = function() {....

值得注意的是，Index.initJQVMAP(mapdata);函数是索引对象中的一个方法：

$data = array(
    '0' => array('ip address' => '1.3.2.1', 'ip state' => 'Active'),
    '1' => array('ip address' => '1.3.2.2', 'ip state' => 'Reserved'),
    '2' => array('ip address' => '1.3.2.3', 'ip state' => 'Active'),
    '3' => array('ip address' => '1.3.2.4', 'ip state' => 'Active')
);

switch ("export-to-csv")
{
    case "export-to-csv" :
        $filename = "1.csv";
        header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
        header("Content-type: text/csv");
        header("Content-Disposition: attachment; filename=\"$filename\"");
        header("Expires: 0");
        ExportCSVFile($data);
        exit();
    default :
        die("Unknown action : " . $_POST["action"]);
        break;
}

function ExportCSVFile($records)
{
    $fh = fopen('php://output', 'w');
    $heading = false;
    if (!empty($records))
    {
        foreach ($records as $row)
        {
            if (!$heading)
            {
                fputcsv($fh, array_keys($row));
                $heading = true;
            }
            fputcsv($fh, array_values($row));
        }
    }
}

它由$ alias hostip="ip route show 0.0.0.0/0 | grep -Eo 'via \S+' | awk '{ print \$2 }'" $ docker run --add-host=docker:$(hostip) --rm -it debian 函数调用初始化。感谢。

2 个答案:

答案 0 :(得分：1)

You could try changing the colors after creating the map:

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

Here there is a working sample.

Edit

I've also found this different solution:

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

答案 1 :(得分：1)

您可以使用$.extend()组合两个对象，如果另一个对象存在，则覆盖其中的值（documentation here）。例如：

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
}

这样，你有一个具有所有默认值的对象，你永远不必弄乱它。您的稀疏对象可以拥有您想要的数据点，并且它将始终扩展到完整的状态集。

相关问题
最新问题