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>