2016-09-21 2 views
0

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このデータを取得できますか?

ありがとうございました

+0

もっと具体的にする必要があります。それはうまくいかないという意味ですか? –

+0

私のvectormapコード( "#world-map-gdp"で始まる)で始まるベクターマップを私の "$ http.get.success"に配置すると、マップは私のWebページに表示されません。 "var gdpdata"の下にある私の状態値にも当てはまります。理想的には、これは私が$ http.getの値をgdpDataオブジェクトに渡すことができたからです。私の地図が表示されなくなりました。 – goalie35

答えて

0

私は別のアプローチをとって私の問題を解決しました。私は私のjVectorMapコード&を投げ捨てました。私はからダウンロードしたsvgマップを使用して、より角度のあるアプローチを行いました。

私はチュートリアルに続いて、角度&のsvgマップを構築する方法についてhereを見つけました。

関連する問題