我如何使用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']
知道如何检索这些数据吗?
谢谢
我用另一种方法解决了我的问题。我扔掉了我的jVectorMap代码&我采用了一种更有棱角的方法,使用了我从这里下载的svg地图。
然后我按照我在这里找到的教程,如何用角&效果很好!