AngularJsを使用しています&ダッシュボードを構築するプロジェクトでMVCを使用しています&は、各状態の動的データベースデータを表示する米国のjVectorMapマップを含める必要があります。次のコードを使用してデータ値をハードコードすると、マップは正常に表示されますが、これらの値をデータベース&に表示するにはどうすればよいでしょうか?このコードをhttp.get.successに移動しようとすると、動作しません。いいえマップは私のWebページに表示されない:AngularJs + MVCを使用してjVectorMapデータをロードするにはどうすればよいですか?
HTML:
<div id="world-map-gdp" class="col-md-8 col-sm-12 col-xs-12" style="height:230px;"></div>
マイapp.jsファイル:
var app = angular.module('dashboardApp', ['ngRoute', 'angularjs-dropdown-multiselect']);
app.controller('dashboardController', DashboardController);
マイ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']
任意のアイデアどのようにIこのデータを取得できますか?
ありがとうございました
もっと具体的にする必要があります。それはうまくいかないという意味ですか? –
私のvectormapコード( "#world-map-gdp"で始まる)で始まるベクターマップを私の "$ http.get.success"に配置すると、マップは私のWebページに表示されません。 "var gdpdata"の下にある私の状態値にも当てはまります。理想的には、これは私が$ http.getの値をgdpDataオブジェクトに渡すことができたからです。私の地図が表示されなくなりました。 – goalie35