问题描述
我有amcharts图书馆的地图,例如,我对此有回应:
如您所见,地图未覆盖容器的全宽,如何使其全宽?
我的另一个问题是,当我调整窗口大小时,在地图的顶部和底部会出现一些空白,如下所示:
我想在较小的窗口中删除该空格,我该怎么做?
/* Chart code */
am4core.useTheme(am4themes_animated);
// Create map instance
let chart = am4core.create("chartdiv",am4maps.MapChart);
chart.logo.height = -15;
chart.width = am4core.percent(100);
chart.height = am4core.percent(100);
chart.seriesContainer.draggable = false;
chart.seriesContainer.resizable = false;
chart.maxZoomLevel = 1;
chart.responsive.enabled = true;
// Set map deFinition
chart.geodata = am4geodata_worldLow;
// Set projection
chart.projection = new am4maps.projections.Projection();
// Create map polygon series
let polygonSeries = chart.series.push(new am4maps.MappolygonSeries());
// Exclude Antartica
polygonSeries.exclude = ["AQ"];
// Make map load polygon (like country names) data from GeoJSON
polygonSeries.useGeodata = true;
// Configure series
let polygonTemplate = polygonSeries.mappolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.polygon.fillOpacity = 0.8;
// take a color from color set
polygonTemplate.adapter.add("fill",function(fill,target) {
return colorSet.getIndex(target.dataItem.index + 1).saturate(0.2);
});
// Create hover state and set alternative fill color
var slider = chart.chartContainer.createChild(am4core.Slider);
slider.start = 0.5;
slider.margin(0,20,0);
slider.valign = "bottom";
slider.align = "center";
slider.width = 500;
slider.events.on("rangechanged",()=>{
chart.deltaLongitude = slider.start * 360 - 180;
});
// Add image series
let imageSeries = chart.series.push(new am4maps.MapImageSeries());
imageSeries.mapImages.template.propertyFields.longitude = "longitude";
imageSeries.mapImages.template.propertyFields.latitude = "latitude";
imageSeries.mapImages.template.tooltipText = "{title}";
imageSeries.mapImages.template.propertyFields.url = "url";
let circle = imageSeries.mapImages.template.createChild(am4core.Circle);
circle.radius = 3;
circle.propertyFields.fill = "color";
let circle2 = imageSeries.mapImages.template.createChild(am4core.Circle);
circle2.radius = 3;
circle2.propertyFields.fill = "color";
circle2.events.on("inited",function(event){
animateBullet(event.target);
});
function animateBullet(circle) {
let animation = circle.animate([{ property: "scale",from: 1,to: 5 },{ property: "opacity",to: 0 }],1000,am4core.ease.circleOut);
animation.events.on("animationended",function(event){
animateBullet(event.target.object);
})
}
let colorSet = new am4core.ColorSet();
imageSeries.data = [ {
"title": "Brussels","latitude": 50.8371,"longitude": 4.3676,"color":colorSet.next()
},{
"title": "copenhagen","latitude": 55.6763,"longitude": 12.5681,{
"title": "Paris","latitude": 48.8567,"longitude": 2.3510,{
"title": "Reykjavik","latitude": 64.1353,"longitude": -21.8952,{
"title": "Moscow","latitude": 55.7558,"longitude": 37.6176,{
"title": "Madrid","latitude": 40.4167,"longitude": -3.7033,{
"title": "London","latitude": 51.5002,"longitude": -0.1262,"url": "http://www.google.co.uk",{
"title": "Peking","latitude": 39.9056,"longitude": 116.3958,{
"title": "New Delhi","latitude": 28.6353,"longitude": 77.2250,{
"title": "Tokyo","latitude": 35.6785,"longitude": 139.6823,"url": "http://www.google.co.jp",{
"title": "Ankara","latitude": 39.9439,"longitude": 32.8560,{
"title": "Buenos Aires","latitude": -34.6118,"longitude": -58.4173,{
"title": "Brasilia","latitude": -15.7801,"longitude": -47.9292,{
"title": "ottawa","latitude": 45.4235,"longitude": -75.6979,{
"title": "Washington","latitude": 38.8921,"longitude": -77.0241,{
"title": "Kinshasa","latitude": -4.3369,"longitude": 15.3271,{
"title": "Cairo","latitude": 30.0571,"longitude": 31.2272,{
"title": "Pretoria","latitude": -25.7463,"longitude": 28.1876,"color":colorSet.next()
} ];
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)