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 - 包含是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>

amChart heat 位置敏感地图

amChart heat Location-sensitive map

javascript

amcharts

ammap