amChart hitze Standort-sensitive Karte

Question

Ich versuche this demo in meiner App zu implementieren, aber ich bekomme die gesamte Karte schwarz unabhängig von den Werten. Hier ist mein Code:

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(); 
} 

Gibt es noch etwas, was ich tun sollte, um Farbbereich basierend auf Werten zu bekommen?

Answer 1

Wenn Sie den SVG auf der AmCharts-Site als Quelle verwenden, wenn Sie Ihren Code lokal ausführen, treten wahrscheinlich Cross-Origin-Probleme auf (besonders wenn Ihre lokale Umgebung http ist - das Include ist https).

Idealerweise sollten Sie JavaScript anstelle der SVG-Datei verwenden. Versuchen Sie, die iranLow.js Javascript-Kartendatei einzubinden und verwenden Sie map: "iranLow" anstelle von mapURL: 'path/to/svg'.

iranLow.js umfassen (nach ammap.js):

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

Modifizierte dataprovider Definition

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

Demo unter:

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>