Amchart热位置敏感地图

Question

我正在尝试在我的应用中实现此演示，但是无论价值如何，我都会得到整个地图。这是我的代码：

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- INCLUCE IS是HTTPS(。

理想情况下，您应该使用映射JavaScript而不是SVG文件。尝试包括iranLow.js映射JavaScript文件，然后使用map: "iranLow"代替mapURL: 'path/to/svg'。

iranlow.js包括(AMMAP.JS之后(：

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

修改dataprovider定义

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

下面的演示：

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>