amChart heat位置敏感地圖

Question

我試圖在我的應用中實現this demo，但無論值如何，我都會獲得全黑地圖。這裏是我的代碼：

var map = AmCharts.makeChart("chartdiv", { 
"type": "map", 
"theme": "light", 
"colorSteps": 10, 
"dataProvider": { 
    "mapURL": "https://www.amcharts.com//lib/3/maps/svg/iranLow.svg", 
    "getAreasFromMap": true, 
    "zoomLevel": 0.9, 
    "areas": [] 
}, 
"areasSettings": { 
    "autoZoom": true, 
    "balloonText": "[[title]]: <strong>[[value]]</strong>" 
}, 
"valueLegend": { 
    "right": 10, 
    "minValue": "little", 
    "maxValue": "a lot!" 
}, 
"zoomControl": { 
    "minZoomLevel": 0.9 
}, 
"titles": 'titles', 
"listeners": [ { 
    "event": "init", 
    "method": updateHeatmap 
} ] 
}); 


function updateHeatmap(event) { 
var map = event.chart; 
if (map.dataGenerated) 
    return; 
if (map.dataProvider.areas.length === 0) { 
    setTimeout(updateHeatmap, 100); 
    return; 
} 
for (var i = 0; i < map.dataProvider.areas.length; i++) { 
    map.dataProvider.areas[ i ].value = Math.round(Math.random() * 10000); 
} 
map.dataGenerated = true; 
map.validateNow(); 
} 

有什麼我應該做的，以獲得基於值的顏色範圍？

Answer 1

在AmCharts網站上使用SVG作爲源代碼時，如果您的本地環境是http - include是https，那麼您很可能會遇到跨源問題。

理想情況下，您應該使用地圖JavaScript代替SVG文件。嘗試包括iranLow.js地圖JavaScript文件，並使用map: "iranLow"而不是mapURL: 'path/to/svg'。

iranLow.js包括（後ammap.js）：下面

"dataProvider": { 
    "map": "iranLow", 
    "getAreasFromMap": true, 
    "zoomLevel": 0.9, 
    "areas": [] 
}, 

演示

<script type="text/javascript" src="https://www.amcharts.com/lib/3/maps/js/iranLow.js"></script> 

改性dataprovider定義：

var map = AmCharts.makeChart("chartdiv", { 
 
"type": "map", 
 
"theme": "light", 
 
"colorSteps": 10, 
 
"dataProvider": { 
 
    "map": "iranLow", 
 
    "getAreasFromMap": true, 
 
    "zoomLevel": 0.9, 
 
    "areas": [] 
 
}, 
 
"areasSettings": { 
 
    "autoZoom": true, 
 
    "balloonText": "[[title]]: <strong>[[value]]</strong>" 
 
}, 
 
"valueLegend": { 
 
    "right": 10, 
 
    "minValue": "little", 
 
    "maxValue": "a lot!" 
 
}, 
 
"zoomControl": { 
 
    "minZoomLevel": 0.9 
 
}, 
 
"titles": 'titles', 
 
"listeners": [ { 
 
    "event": "init", 
 
    "method": updateHeatmap 
 
} ] 
 
}); 
 

 

 
function updateHeatmap(event) { 
 
var map = event.chart; 
 
if (map.dataGenerated) 
 
    return; 
 
if (map.dataProvider.areas.length === 0) { 
 
    setTimeout(updateHeatmap, 100); 
 
    return; 
 
} 
 
for (var i = 0; i < map.dataProvider.areas.length; i++) { 
 
    map.dataProvider.areas[ i ].value = Math.round(Math.random() * 10000); 
 
} 
 
map.dataGenerated = true; 
 
map.validateNow(); 
 
}

#chartdiv { 
 
    width: 100%; 
 
    height: 300px; 
 
}

<script type="text/javascript" src="https://www.amcharts.com/lib/3/ammap.js"></script> 
 
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<script type="text/javascript" src="https://www.amcharts.com/lib/3/maps/js/iranLow.js"></script> 
 
<div id="chartdiv"></div>