2016-07-27 3 views
0

사용할 수있는 데이터가 없을 때 아래의 코드를 사용하여지도를 렌더링하고 있습니다. 데이터가 올 때지도가 잘 작동합니다. 레이블을 추가하려면 serveral 메서드를 시도했지만 작동하지 않습니다. 마지막 두 줄은 내가 레이블AmMap addLabel not working

// build map 
AmCharts.ready(function() { 
    AmCharts.theme = AmCharts.themes.dark; 
    window.map = new AmCharts.AmMap(); 

    window.map.areasSettings = { 
     unlistedAreasColor: "#000000", 
     unlistedAreasAlpha: 0.1 
    }; 
    window.map.imagesSettings.balloonText = "<span style='font-size:14px;'><b>[[title]]</b>: [[value]]</span>"; 

    var dataProvider = { 
     mapVar: AmCharts.maps.worldLow, 
     images: [] 
    } 

    // create circle for each country 


    // it's better to use circle square to show difference between values, not a radius 
    var maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI; 
    var minSquare = minBulletSize * minBulletSize * 2 * Math.PI; 

    // create circle for each country 
    for (var i = 0; i < mapData.length; i++) { 
     var dataItem = mapData[i]; 
     var value = dataItem.value; 
     // calculate size of a bubble 
     var square = (value - min)/(max - min) * (maxSquare - minSquare) + minSquare; 
     if (square < minSquare) { 
      square = minSquare; 
     } 
     var size = Math.sqrt(square/(Math.PI * 2)); 
     var id = dataItem.code; 

     dataProvider.images.push({ 
      type: "circle", 
      width: size, 
      height: size, 
      color: "#ff9a00", 
      longitude: latlong[id].longitude, 
      latitude: latlong[id].latitude, 
      title: dataItem.name, 
      value: value 
     }); 
    } 

    window.map.dataProvider = dataProvider; 
    window.map.export = { 
     enabled: true 
    } 
    window.map.projection = "winkel3"; 
    window.map.write("dash_chart_world"); 
}); 

// add label 
AmCharts.AmMap.mapdiv.addLabel(0, '50%', 'You don\'t have any sales yet', 'center'); 

// set opacity of the chart div 
AmCharts.AmMap.mapdiv.style.opacity = 0.5; 

어떤 도움이 감사를 추가하는 지금까지 시도했다 보여준다. 감사합니다.

답변

1

놓친 것은 차트에 문제가 발생할 때마다 함수를 호출해야한다는 것입니다. 귀하의 요구가 데이터에 연결되기 때문에 이미지의 배열이 비어있는 경우 우리는 dataUpdated에 대한 이벤트 리스너를 추가하고 확인할 수 있습니다

  • 속한 addLabel 방법 :

    map.addListener("dataUpdated", function() { 
        if (map.dataProvider.images.length == 0) { 
         // add label 
         map.addLabel(0, '50%', 'You don\'t have any sales yet', 'center'); 
    
         // set opacity of the chart div 
         map.mapContainer.node.style.opacity = 0.1; 
        } 
    }); 
    

    다른 내가 한 변경에 관하여 AmChart 개체가 아니라 AmCharts.AmMap.mapdiv이됩니다.

  • map.div []을 사용하여 얻을 수있는 전체지도를 보유하는 div의 불투명도를 변경하면 추가 된 레이블의 불투명도가 변경됩니다. 지도 자체의 불투명도 만 변경하려는 경우 map.mapContainer.node 요소에서 변경할 수 있습니다. (이것은지도 투영을 들고 svg의 일부입니다.)

난 당신이 동적 데이터 작업을 볼 수있는 작은 demo를 준비했다.

+0

감사합니다. @gerric, 완벽했습니다. 필자는 다른 라인 차트와 도넛 차트에서 "데이터가 없음"을 표시 할 수 있었지만 AmMap은 까다 롭습니다. –