jvm.Map不是JQUERY中的函数吗?

问题描述

我正在尝试通过此网址制作此图表 http://jvectormap.com/examples/usa-unemployment/

I am trying to make this graph from this urlhttp://jvectormap.com/examples/usa-unemployment/

我得到的错误是 jvm.Map不是函数

这是我的代码 http://plnkr.co/edit/EHPsa2nUxxprs1tM0OoP?p=preview

$(function () {
    $.getJSON('data.json', function (data) {
        var val = 2009;
        statesValues = jvm.values.apply({}, jvm.values(data.states)),
        metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population)),
        metroUnemplValues = Array.prototype.concat.apply([], jvm.values(data.metro.unemployment));

        $('#world-map-gdp').vectorMap({
            map: 'us_aea_en',
            markers: data.metro.coords,
            series: {
                markers: [{
                    attribute: 'fill',
                    scale: ['#FEE5D9', '#A50F15'],
                    values: data.metro.unemployment[val],
                    min: jvm.min(metroUnemplValues),
                    max: jvm.max(metroUnemplValues)
                }, {
                    attribute: 'r',
                    scale: [5, 20],
                    values: data.metro.population[val],
                    min: jvm.min(metroPopValues),
                    max: jvm.max(metroPopValues)
                }],
                regions: [{
                    scale: ['#DEEBF7', '#08519C'],
                    attribute: 'fill',
                    values: data.states[val],
                    min: jvm.min(statesValues),
                    max: jvm.max(statesValues)
                }]
            },
            onMarkerTipShow: function (event, label, index) {
                label.html(
                    '<b>' + data.metro.names[index] + '</b><br/>' +
                    '<b>Population: </b>' + data.metro.population[val][index] + '</br>' +
                    '<b>Unemployment rate: </b>' + data.metro.unemployment[val][index] + '%');
            },
            onRegionTipShow: function (event, label, code) {
                label.html(
                    '<b>' + label.html() + '</b></br>' +
                    '<b>Unemployment rate: </b>' + data.states[val][code] + '%');
            }
        });

        var mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject');

        $("#slider").slider({
            value: val,
            min: 2005,
            max: 2009,
            step: 1,
            slide: function (event, ui) {
                val = ui.value;
                mapObject.series.regions[0].setValues(data.states[ui.value]);
                mapObject.series.markers[0].setValues(data.metro.unemployment[ui.value]);
                mapObject.series.markers[1].setValues(data.metro.population[ui.value]);
            }
        });
    });
});

推荐答案

需要导入四个js文件:

Need to import four js files:

• jvectormap/jvectormap.js(绑定/注册 jvm ，但也使用jQuery: jvm.$ = jQuery )
• jvectormap/src/map.js (创建 jvm.Map 构造函数)
• jvectormap/jquery-jvectormap.js(将 .vectorMap 添加为JQuery插件 $.fn.vectorMap 并注册"addMap"或"set"回调，用于以后的世界地图注册/更新:例如'world_mill')，在之后加载地图数据时对Ajax请求很有用.
• jvectormap-maps/jquery-jvectormap-world-mill.js

• jvectormap/jvectormap.js (binds/registers jvm, but also with jQuery: jvm.$ = jQuery)
• jvectormap/src/map.js (creates jvm.Map constructor)
• jvectormap/jquery-jvectormap.js (add .vectorMap as a JQuery plugin $.fn.vectorMap and registers 'addMap' or 'set' callbacks, for a later world map registration/update: e.g 'world_mill'), useful on Ajax requests when map data is loaded after.
• jvectormap-maps/jquery-jvectormap-world-mill.js

如果使用bower( bower.json )，则这些是最新的软件包:

If using bower (bower.json), these were the latest packages:

    "jvectormap": "2.0.5",
    "jvectormap-maps": "*"

这篇关于jvm.Map不是JQUERY中的函数吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！