Ammapsの凡例は、ウィンドウに表示されます。resize

Question

マップを作成して凡例を作成しようとしています。私は奇妙な問題に慣れていますが、凡例は最初の負荷では表示されませんが、ウィンドウのサイズ変更にのみ表示されます。ウィンドウサイズにかかわらず、任意のサイズ変更で、凡例が表示されます（VIRY WEIRD RIGHT？）。

コード：

var icon = "M9.875,0.625C4.697,0.625,0.5,4.822,0.5,10s4.197,9.375,9.375,9.375S19.25,15.178,19.25,10S15.053,0.625,9.875,0.625"; 
var map = AmCharts.makeChart("mapdiv", { 
    /** 
    * this tells amCharts it's a map 
    */ 
    "type": "map", 

    /** 
    * create data provider object 

    */ 
    "dataProvider": { 
     "mapURL": "https://raw.githubusercontent.com/ggwc82/amcharts/master/unitedKingdomLow.svg", 
     "getAreasFromMap": false, 

     "images": [ { 
     "latitude": 51.5074, 
     "longitude": 0.1278, 
     "svgPath": icon, 
     "scale": 0.7, 
     "label": "Dagenham Factory", 
     "labelBackgroundColor": "#ffffff", 
     "labelColor": "#696D6E", 
     "labelFontSize": 14, 
     "labelShiftY": 00, 
     "color": "#D30000", 
     "title": "1 Warning", 
     "url": "http://www.google.co.uk", 
     "description": "DRM with id 09 is offline" 
     }, 
     { 
     "latitude": 53.4808, 
     "longitude": -2.2426, 
     "svgPath": icon, 
     "scale": 0.7, 
     "label": "Manchester Factory", 
     "labelBackgroundColor": "#ffffff", 
     "labelColor": "#696D6E", 
     "labelFontSize": 14, 
     "labelShiftY": 0, 
     "color": "#40D300", 
     "title": "No Issues", 
     "url": "http://www.google.co.uk", 
     "description": "" 
     }, 
     { 
     "latitude": 54.9783, 
     "longitude": -1.6178, 
     "svgPath": icon, 
     "scale": 0.7, 
     "label": "Newcastle Factory", 
     "labelBackgroundColor": "#ffffff", 
     "labelColor": "#696D6E", 
     "labelFontSize": 14, 
     "labelShiftY": 0, 
     "color": "#D3D000", 
     "title": "2 Alerts", 
     "url": "http://www.google.co.uk", 
     "description": "DRM with id 23 is inactive. DRM with id 25 is inactive." 
     } 
    ], 

    }, 


    /** 
    * create areas settings 
    * autoZoom set to true means that the map will zoom-in when clicked on the area 
    * selectedColor indicates color of the clicked area. 
    */ 
    "areasSettings": { 
    "autoZoom": true, 
    "unlistedAreasColor": "#C8E1D6", 
    "selectedColor": "#CC0000" 

    }, 
    "zoomControl": { 
    "zoomControlEnabled": false, 
    "homeButtonEnabled": true, 
    }, 
    "dragMap": false, 
    "showDescriptionOnHover": true, 
    "allLabels": [ 
     { 
     "text": "Default Factory View - UK Sites", 
     "bold": true, 
     "size": 20, 
     "color": "#696D6E", 
     "align": "center", 
     "y": 100 
     } 
    ], 

}); 


var legend = new AmCharts.AmLegend(); 
console.log("hello"); 
map.addLegend(legend,"legenddiv"); 
legend.data = [{title:"first", color:"#CC0000", markerType: "circle"}, 
       {title:"second", color:"#00CC00", markerType: "circle"}, 
       {title:"second", color:"#ffff00", markerType: "circle"}] 

Answer 1

あなたはmakeChart機能を使用しています。この関数は、単一の呼び出しでチャート/マップを作成し、JSONを使用して設定し、最初の引数として渡されたコンテナdivに表示し、以前に作成されたインスタンスを戻すヘルパーです。

インスタンスに凡例を追加していますが、コードを入力して凡例を追加するときに既にmakeChartヘルパーによってレンダリングされています。したがって、既にレンダリングされたグラフに凡例を追加すると、ウィンドウのサイズを変更したときに再レンダリングされたときにのみ凡例が表示されます。 documentationで指定されているように

、makeChart方法の使用が必須であるので、AmMapクラスは、明示的にインスタンス化することはできませんが、あなたはまた、代わりに、後でそれを行うためのJSONの設定であなたの凡例を設定することができます。

/** 
* Legend 
*/ 
"legend": { 
    "width": 400, 
    "backgroundAlpha": 1, 
    "backgroundColor": "#fff", 
    "borderColor": "#000", 
    "borderAlpha": 1, 
    "bottom": 15, 
    "right": 15, 
    "horizontalGap": 10, 
    "data": [{ 
    "title": "first", 
    "color": "#CC0000", 
    "markerType": "circle" 
    }, { 
    "title": "second", 
    "color": "#00CC00", 
    "markerType": "circle" 
    }, { 
    "title": "third", 
    "color": "#ffff00", 
    "markerType": "circle" 
    }] 
}, 

私はJSONで構成された伝説など、あなたの質問に基づいてlittle fiddleを入れています。凡例は、地図と同時に表示され、サイズ変更や表示に必要なものは表示されません。