我正在使用ReactJs使用AmCharts库创建美国地图。我想要的正是这个：https://www.amcharts.com/demos/us-heat-map/。当您在小提琴上检查它的代码时，您会注意到他们在脚本标签中使用了单独的美国地图库。
我在这里检查了 amchart 文档 反应 https://github.com/amcharts/amcharts3-react 但找不到太大帮助。如何使用 React 实现此地图或任何其他县地图？我应该在我的索引.html文件中包含美国的图书馆吗？我尝试了这种方法，但我看到一个空屏幕，没有任何错误。检查我的代码如下：
import React, {Component} from 'react';
import AmCharts from "@amcharts/amcharts3-react";
export default class Map extends Component {
render(){
return(
<div>
<AmCharts.React style={{width: "100%",height: "500px"}}
options={{
"type": "serial",
"theme": "light",
"dataProvider": {
"map": "usaLow",
"areas": [ {
"id": "US-AL",
"value": 4447100
}, {
"id": "US-AK",
"value": 626932
}, {
"id": "US-AZ",
"value": 5130632
}, {
"id": "US-AR",
"value": 2673400
}, {
"id": "US-CA",
"value": 33871648
}, {
"id": "US-CO",
"value": 4301261
}, {
"id": "US-CT",
"value": 3405565
}, {
"id": "US-DE",
"value": 783600
}, {
"id": "US-FL",
"value": 15982378
}, {
"id": "US-GA",
"value": 8186453
}, {
"id": "US-HI",
"value": 1211537
}, {
"id": "US-ID",
"value": 1293953
}, {
"id": "US-IL",
"value": 12419293
}, {
"id": "US-IN",
"value": 6080485
}, {
"id": "US-IA",
"value": 2926324
}, {
"id": "US-KS",
"value": 2688418
}, {
"id": "US-KY",
"value": 4041769
}, {
"id": "US-LA",
"value": 4468976
}, {
"id": "US-ME",
"value": 1274923
}, {
"id": "US-MD",
"value": 5296486
}, {
"id": "US-MA",
"value": 6349097
}, {
"id": "US-MI",
"value": 9938444
}, {
"id": "US-MN",
"value": 4919479
}, {
"id": "US-MS",
"value": 2844658
}, {
"id": "US-MO",
"value": 5595211
}, {
"id": "US-MT",
"value": 902195
}, {
"id": "US-NE",
"value": 1711263
}, {
"id": "US-NV",
"value": 1998257
}, {
"id": "US-NH",
"value": 1235786
}, {
"id": "US-NJ",
"value": 8414350
}, {
"id": "US-NM",
"value": 1819046
}, {
"id": "US-NY",
"value": 18976457
}, {
"id": "US-NC",
"value": 8049313
}, {
"id": "US-ND",
"value": 642200
}, {
"id": "US-OH",
"value": 11353140
}, {
"id": "US-OK",
"value": 3450654
}, {
"id": "US-OR",
"value": 3421399
}, {
"id": "US-PA",
"value": 12281054
}, {
"id": "US-RI",
"value": 1048319
}, {
"id": "US-SC",
"value": 4012012
}, {
"id": "US-SD",
"value": 754844
}, {
"id": "US-TN",
"value": 5689283
}, {
"id": "US-TX",
"value": 20851820
}, {
"id": "US-UT",
"value": 2233169
}, {
"id": "US-VT",
"value": 608827
}, {
"id": "US-VA",
"value": 7078515
}, {
"id": "US-WA",
"value": 5894121
}, {
"id": "US-WV",
"value": 1808344
}, {
"id": "US-WI",
"value": 5363675
}, {
"id": "US-WY",
"value": 493782
} ]
}
}} />
</div>
);
}
}
我将以下库从 http://jsfiddle.net/api/post/library/pure/添加到我的索引.html文件中
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js">
</script>
如果这不是正确的方法，请让我知道正确的方法。
在普通的create-react-app中，只需将此代码放在您的应用程序中即可.js
import React, { Component } from 'react';
import AmCharts from "@amcharts/amcharts3-react";
class App extends Component {
render(){
//config as same as yours but inside const
const config = {
"type": "map",
"theme": "light",
"colorSteps": 10,
"dataProvider": {
"map": "usaLow",
"areas": [{
"id": "US-AL",
"value": 4447100
},{//..all areas mentioned in question}]
},
"areasSettings": {
"autoZoom": true
},
"valueLegend": {
"right": 10,
"minValue": "little",
"maxValue": "a lot!"
},
"listeners": [{
"event": "descriptionClosed",
"method": function(ev) {
ev.chart.selectObject();
}
}]
};
return (
<div className="App">
<AmCharts.React style={{ width: "100%", height: "500px" }} options={config} />
</div>);
}
}
将这些包含在索引中就足够了.html
<link href="https://www.amcharts.com/lib/3/ammap.css" rel="stylesheet">
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>