javascript - amChart heat 位置敏感 map

Question

我正在尝试实现 this demo在我的应用程序中，但无论值如何，我都会将整个 map 变黑。这是我的代码:

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 时)，您可能会遇到跨源问题。

理想情况下，您应该使用 map JavaScript 而不是 SVG 文件。尝试包含 iranLow.js map 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>