1

我正在尝试在我的应用程序中实现此演示，但无论值如何，我都会将整个地图变为黑色。这是我的代码：

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

为了根据值获得颜色范围，我还应该做些什么？

4

1 回答 1

4

在本地运行代码时，在使用 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>

于 2017-04-26T11:07:01.117 回答