AmCharts V4 (Карты) Увеличение масштаба карты создает полосу прокрутки на обеих осях (только для IE) - PullRequest
Новая
       26

AmCharts V4 (Карты) Увеличение масштаба карты создает полосу прокрутки на обеих осях (только для IE)

0 голосов
/ 28 сентября 2018

Я использую AmCharts (Карты) в Версии 4. При увеличении графика я получаю полосы прокрутки (для осей x и y).

Нужно ли использовать некоторые полифилы для IE?

Вот мой текущий код: main.html 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Minimum Example</title>
  <script src="https://www.amcharts.com/lib/4/core.js"></script>
  <script src="https://www.amcharts.com/lib/4/maps.js"></script>
  <script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>

  <button id="us-button">Zoom to US</button>
  <br />
  <button id="br-button">Zoom to BR</button>
  <div id="chartdiv"></div>

  <script src="./main.js"></script>
</body>

</html>

main.css 

@import url("https://fonts.googleapis.com/css?family=Archivo+Narrow");

body {
  font-family: "Archivo Narrow";
}
#chartdiv {
  width: 100%;
  height: 350px;
}

main.js 

/**
 * --------------------------------------------------------
 * This demo was created using amCharts V4 preview release.
 *
 * V4 is the latest installement in amCharts data viz
 * library family, to be released in the first half of
 * 2018.
 *
 * For more information and documentation visit:
 * https://www.amcharts.com/docs/v4/
 * --------------------------------------------------------
 */

/* Create map instance */
var chart = am4core.create('chartdiv', am4maps.MapChart);

/* Set map definition */
chart.geodata = am4geodata_worldLow;

/* Set projection */
chart.projection = new am4maps.projections.Miller();

/* Create map polygon series */
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

/* Make map load polygon (like country names) data from GeoJSON */
polygonSeries.useGeodata = true;

/* Configure series */
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = '{name}';
polygonTemplate.fill = am4core.color('#74B266');
polygonTemplate.events.on('hit', function(ev) {
  ev.target.series.chart.zoomToMapObject(ev.target);
});

/* Create hover state and set alternative fill color */
var hs = polygonTemplate.states.create('hover');
hs.properties.fill = am4core.color('#367B25');

// No thanks, Antarctica, no thanks.
polygonSeries.exclude = ['AQ'];

chart.zoomControl = new am4maps.ZoomControl();

var buttonTopPosition;

polygonSeries.events.on('inited', function() {
  polygonSeries.mapPolygons.each(function(polygon) {
    const id = polygon.dataItem.dataContext.id;
    let assignButton = false;

    switch (id) {
      case 'US':
        assignButton = 'us';
        break;

      case 'BR':
        assignButton = 'br';
        break;

      default:
        break;
    }

    if (assignButton) {
      const button = document.getElementById(assignButton + '-button');
      button.addEventListener('click', function() {
        chart = createMarkers(chart);
        setTimeout(function() {
          const animation = chart.zoomToMapObject(polygon);
        }, 500);
      });
    }
  });
});

function createMarkers(chart) {
  console.log('calling createMarkers');
  const demoAddress = { my_lat: 35.6895, my_lng: 139.6917 };
  const mapImageSeries = chart.series.push(new am4maps.MapImageSeries());

  const imageSeriesTemplate = mapImageSeries.mapImages.template;
  const circle = imageSeriesTemplate.createChild(am4core.Circle);
  circle.radius = 10;
  circle.fill = am4core.color('#ff0000');
  circle.stroke = am4core.color('#FFFFFF');
  circle.strokeWidth = 2;
  circle.nonScaling = true;
  circle.tooltipText = 'hi';
  imageSeriesTemplate.propertyFields.latitude = 'latitude';
  imageSeriesTemplate.propertyFields.longitude = 'longitude';
  mapImageSeries.data = { latitude: demoAddress.latitude, longitude: demoAddress.longitude };
  return chart;
}

Чтобы воспроизвести мою проблему, используйте Internet Explorer 11 и откройте index.html, затем увеличьте масштаб страны и посмотрите, как полосы прокрутки увеличиваются с увеличением.

...