在amchart圖表中嵌入json字符串？

Question

我試圖將一些json嵌入到我的amcharts中。這是html的javascript代碼：

<script type="text/javascript"> 
    AmCharts.makeChart("mapdiv", { 
    "type": "map", 
    "imagesSettings": { 
    "rollOverColor": "#089282", 
    "rollOverScale": 1, 
    "selectedScale": 0.5, 
    "selectedColor": "#089282", 
    "color": "#13564e", 
    "selectable": false, 
    "bringForwardOnHover": false 
    }, 
    "areasSettings": { 
    "color": "#D3D3D3", 
    "autoZoom": true 
    }, 
    "data": { 
    "map": "puertoRicoHigh" 
    }, 
    "dataLoader": { 
    "url": "http://OurServer/Service1.svc/GetLocations", 
    "format": "json", 
    "showErrors": true, 
    "postProcess": function(data, config, map) { 
     // create a new dataProvider 
     var mapData = map.data; 

     // init images array 
     if (mapData.images === undefined) 
     mapData.images = []; 

     // create images out of loaded data 
     for(var i = 0; i < data.length; i++) { 
     var image = data[i]; 
     image.type = "circle"; 
     mapData.images.push(image); 
     } 
     return mapData; 
    } 
    } 
}); 
</script> 

這是json的樣子：[{"title":"Site1","latitude":18.37,"longitude":-67.18},{"title":"Site2","latitude":18.20,"longitude":-65.80}]

我一直在試圖嵌入這個json到代碼，但是我無法做所以。

我嘗試使用dataprovider代替dataloader，因爲它不是一個http請求，但我知道我失去了一些東西：

<script type="text/javascript"> 
    AmCharts.makeChart("mapdiv", { 
    "type": "map", 
    "imagesSettings": { 
    "rollOverColor": "#089282", 
    "rollOverScale": 1, 
    "selectedScale": 0.5, 
    "selectedColor": "#089282", 
    "color": "#13564e", 
    "selectable": false, 
    "bringForwardOnHover": false 
    }, 
    "areasSettings": { 
    "color": "#D3D3D3", 
    "autoZoom": true 
    }, 
    "data": { 
    "map": "puertoRicoHigh" 
    }, 
    "dataProvider": [{"title":"Site1","latitude":18.3764,"longitude":-67.1819},{"title":"Site2","latitude":18.2001,"longitude":-65.8081}], 
    "postProcess": function(data, config, map) { 
     // create a new dataProvider 
     var mapData = map.data; 

     // init images array 
     if (mapData.images === undefined) 
     mapData.images = []; 

     // create images out of loaded data 
     for(var i = 0; i < data.length; i++) { 
     var image = data[i]; 
     image.type = "circle"; 
     mapData.images.push(image); 
     } 
     return mapData; 
    } 
}); 
</script> 

Answer 1

地圖dataProvider是object，而不是一個數組，其結構表現出對map demos on the AmCharts website。由於您的JSON基本上是陣列，通過後處理方法去，你可以調整你的dataProvider像這樣，將type: "circle"每個圖像和跳躍的任何進一步處理的需要：

dataProvider: { 
    map: "puertoRicoHigh", 
    images: [ 
    {"title":"Site1","latitude":18.3764,"longitude":-67.1819, "type": "circle"}, 
    {"title":"Site2","latitude":18.2001,"longitude":-65.8081, "type": "circle"} 
    ] 
} 

演示：

AmCharts.makeChart("mapdiv", { 
 
    "type": "map", 
 
    "imagesSettings": { 
 
    "rollOverColor": "#089282", 
 
    "rollOverScale": 1, 
 
    "selectedScale": 0.5, 
 
    "selectedColor": "#089282", 
 
    "color": "#13564e", 
 
    "selectable": false, 
 
    "bringForwardOnHover": false 
 
    }, 
 
    "areasSettings": { 
 
    "color": "#D3D3D3", 
 
    "autoZoom": true 
 
    }, 
 
    "dataProvider": { 
 
    "map": "puertoRicoHigh", 
 
    "images": [{ 
 
     "title": "Site1", 
 
     "latitude": 18.3764, 
 
     "longitude": -67.1819, 
 
     "type": "circle" 
 
     }, 
 
     { 
 
     "title": "Site2", 
 
     "latitude": 18.2001, 
 
     "longitude": -65.8081, 
 
     "type": "circle" 
 
     } 
 
    ] 
 
    } 
 
});

<script src="//www.amcharts.com/lib/3/ammap.js"></script> 
 
<script src="//www.amcharts.com/lib/3/maps/js/puertoRicoHigh.js"></script> 
 
<div id="mapdiv" style="width: 100%; height: 400px;"></div>