我如何使用AngularJs + MVC加载jVectorMap数据

本文关键字:加载 jVectorMap 数据 MVC 何使用 AngularJs | 更新日期: 2023-09-27 18:08:04

我用的是AngularJs &MVC在一个项目,我正在做建立一个仪表板& &;需要包含美国的jVectorMap地图,该地图显示每个州的动态数据库数据。当我使用以下代码硬编码数据值时,地图显示得很好,但是我如何从数据库中检索这些值呢?显示他们吗?当我尝试将此代码移动到我的http.get。成功,是行不通的。我的网页上没有地图:

HTML:

<div id="world-map-gdp" class="col-md-8 col-sm-12 col-xs-12" style="height:230px;"></div>

My app.js文件:

var app = angular.module('dashboardApp', ['ngRoute', 'angularjs-dropdown-multiselect']);
app.controller('dashboardController', DashboardController);

My DashboardController.js文件:

var DashboardController = function ($scope, $http) {
$http.get('/Account/GetDashboardDetails')
    .success(function (result) {
        //various coding done here
    })
    .error(function (data) {
        console.log(data);
    });
var gdpData = {
    "US-PA": 1,
    "US-TN": 11,
    "US-VA": 20,
    "US-WV": 158,
    "US-NV": 85,
    "US-TX": 1,
    "US-NH": 351,
    "US-NY": 83,
    "US-HI": 1219,
    "US-VT": 366,
    "US-NM": 52,
    "US-NC": 7,
    "US-ND": 21,
    "US-NE": 105,
    "US-LA": 3,
    "US-SD": 52,
    "US-DC": 461,
    "US-DE": 13,
    "US-FL": 69,
    "US-CT": 1,
    "US-WA": 19,
    "US-KS": 16,
    "US-WI": 12,
    "US-OR": 2023,
    "US-KY": 11,
    "US-ME": 444,
    "US-OH": 867,
    "US-OK": 147,
    "US-ID": 116,
    "US-WY": 218,
    "US-UT": 1563,
    "US-IN": 17,
    "US-IL": 2,
    "US-AK": 79,
    "US-NJ": 1998,
    "US-CO": 5745,
    "US-MD": 283,
    "US-MA": 10,
    "US-AL": 12,
    "US-MO": 11,
    "US-MN": 35,
    "US-CA": 22,
    "US-IA": 59,
    "US-MI": 22,
    "US-GA": 195,
    "US-AZ": 304,
    "US-MT": 14,
    "US-MS": 12,
    "US-SC": 507,
    "US-RI": 61,
    "US-AR": 216
};
$(function () {
    $('#world-map-gdp').vectorMap({
        map: 'us_aea_en',
        backgroundColor: 'transparent',
        colors: {
            "us-va": '#4E7387'
        },
        zoomOnScroll: true,
        series: {
            regions: [{
                values: gdpData,
                scale: ['#E6F2F0', '#149B7E'],
                normalizeFunction: 'polynomial'
            }]
        },
        onRegionTipShow: function (e, el, code) {
            el.html(el.html() + ' (' + gdpData[code] + ')');
        }
    });
});
};
DashboardController.$inject = ['$scope', '$http']

知道如何检索这些数据吗?

谢谢

我如何使用AngularJs + MVC加载jVectorMap数据

我用另一种方法解决了我的问题。我扔掉了我的jVectorMap代码&我采用了一种更有棱角的方法,使用了我从这里下载的svg地图。

然后我按照我在这里找到的教程,如何用角&效果很好!