如何在AngularJS中使用amMap? [英] How do I use an amMap in AngularJS?

问题描述

我正在Web应用程序中使用amCharts库，以便呈现所有图表.它们工作正常，但是我需要在页面上添加mapChart.我对mapCharts的了解不如对其他图表的熟悉，因为使用它似乎需要与其他图表不同的方法.

I am using the amCharts library in my Web application in order to render all the charts. They are working fine, but I need to add a mapChart on the page. I am not as familiar with mapCharts as I am with other charts, as using it seems to require a different approach than the others.

请查看我的代码的设置，并查看我的代码中可能出了什么问题.

Please look at the setup of my code and look at what may have gone wrong within my code.

以下代码将库添加到索引文件中:

The following code adds the library into the index file:

<script type="text/javascript" src="bower_components/ammap3/ammap/ammap.js">
</script>
<script type="text/javascript" 
src="bower_components/ammap3/ammap/maps/js/worldLow.js"></script>

我这样编写控制器:

.controller('MapChartCtrl', ['$scope', '$timeout', function ($scope, $timeout) {

$scope.amChartOptions = {
          type: 'map',
          theme: 'blur',
          zoomControl: { zoomControlEnabled: false, panControlEnabled: false 
},

data: {
    map: 'worldLow',
    zoomLevel: 3.5,
    zoomLongitude: 10,
    zoomLatitude: 52,

    areas: [
      { title: 'Austria', id: 'AT', color: '#62bbb2', customData: '1 
                244', groupId: '1'},
      { title: 'Ireland', id: 'IE', color: '#62bbb2', customData: '1 
                342', groupId: '1'},
      { title: 'Denmark', id: 'DK', color: '#62bbb2', customData: '1 
                973', groupId: '1'},
      { title: 'Finland', id: 'FI', color: '#62bbb2', customData: '1 
                573', groupId: '1'},
      { title: 'Sweden', id: 'SE', color: '#62bbb2', customData: '1 
                084', groupId: '1'},
      { title: 'Great Britain', id: 'GB', color: '#62bbb2', 
                customData: '1 452', groupId: '1'}
    ]
},

areasSettings: {
    rollOverOutlineColor: "#62bbb2",
    rollOverColor: "#62bbb2",
    alpha: 0.8,
    unlistedAreasAlpha: 0.2,
    unlistedAreasColor: "#bfbfbf",
    balloonText: '[[title]]: [[customData]] users'},
    categoryField: "title",

    legend: {
        width: '100%',
        marginRight: 27,
        marginLeft: 27,
        equalWidths: false,
        backgroundAlpha: 0.3,
        backgroundColor: "#bfbfbf",
        borderColor: "#bfbfbf",
        borderAlpha: 1,
        top: 362,
        left: 0,
        horizontalGap: 10,
        data: [
        {
          title: 'over 1 000 users',
          color: '#62bbb2'
        },
        {
          title: '500 - 1 000 users',
          color: '#b9f2a1'
        },
        {
          title: '100 - 500 users',
          color: '#ed7878'
        },
        {
          title: '0 - 100 users',
          color: '#e1e1e1'
        }
    ]
},

export: {
    enabled: true
},

pathToImages: 'bower_components/amcharts/dist/amcharts/images/'
}}])




   <div class="panel-heading">Map Chart</div>
 <div ng-controller="MapChartCtrl" style="height: 400px; width: 100%;">
 <am-chart id="MapChart" options="amChartOptions"></am-chart>
 </div> 

推荐答案

控制器:

.directive('myElem',
 function () {
   return {
       restrict: 'E',
       replace:true,

       template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
       link: function (scope, element, attrs) {

            var chart = false;

            var initChart = function() {
              if (chart) chart.destroy();
              var config = scope.config || {};
              var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
               chart = AmCharts.makeChart("chartdiv", {
                   type: "map",
                   projection: "winkel3",
                   theme: "light",
                   imagesSettings: {
                     rollOverColor: "#089282",
                     rollOverScale: 3,
                     selectedScale: 3,
                     selectedColor: "#089282",
                     color: "#13564e"
                   },

                   areasSettings: {
                     unlistedAreasColor: "#15A892",
                     outlineThickness: 0.1
                   },

                   dataProvider: {
                     map: "worldLow",
                     images: [ {
                       svgPath: targetSVG,
                       zoomLevel: 5,
                       scale: 0.5,
                       title: "Vienna",
                       latitude: 48.2092,
                       longitude: 16.3728
                     }, {
                       svgPath: targetSVG,
                       zoomLevel: 5,
                       scale: 0.5,
                       title: "Minsk",
                       latitude: 53.9678,
                       longitude: 27.5766
                     }, {
                       svgPath: targetSVG,
                       zoomLevel: 5,
                       scale: 0.5,
                       title: "Brussels",
                       latitude: 50.8371,
                       longitude: 4.3676
                     }, {
                       svgPath: targetSVG,
                       zoomLevel: 5,
                       scale: 0.5,
                       title: "Sarajevo",
                       latitude: 43.8608,
                       longitude: 18.4214
                     }, {
                       svgPath: targetSVG,
                       zoomLevel: 5,
                       scale: 0.5,
                       title: "Sofia",
                       latitude: 42.7105,
                       longitude: 23.3238
                     }, {
                       svgPath: targetSVG,
                       zoomLevel: 5,
                       scale: 0.5,
                       title: "Zagreb",
                       latitude: 45.8150,
                       longitude: 15.9785
                     }
                     ]
                   },
                   export: {
                     enabled: true
                   },

                  pathToImages: 'bower_components/amcharts/dist/amcharts/images/'
        });


            };
            initChart();

       }         
   }
   });

HTML:

<my-elem></my-elem>

这篇关于如何在AngularJS中使用amMap?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！