Как решить проблему с интернет-браузером в High Maps? - PullRequest
Новая
       1

Как решить проблему с интернет-браузером в High Maps?

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

Карта отображается во всех браузерах, таких как Chrome, Firefox, но карта не отображается в IE 11, этот код работает в Chrome, но не работает в IE11 после добавления события загрузки и зацикливания данных, ответ заметен? но он работает в Chrome, если я использую событие загрузки также 

<html>

<head>
  <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
  <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://code.highcharts.com/maps/highmaps.js"></script>
  <script src="https://code.highcharts.com/maps/modules/data.js"></script>
  <script src="https://code.highcharts.com/mapdata/index.js?1"></script>
  <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <script src="https://www.highcharts.com/samples/maps/demo/all-maps/jquery.combobox.js"></script>
  <script type="text/javascript">
    $(function() {
      var mapData = Highcharts.maps['custom/world'];
      var data = [{"Name": "Australia","status": "Live"}];
      $('#container').highcharts('Map', {
        chart: {
          events: {
            load: function() {
              for (let i = 0; i < this.series[1].data.length; i++) {
                  this.series[0].data.forEach((el) => {
					if (el['name'] == this.series[1].data[i].Name) {
						if(this.series[1].data[i].status == 'Live'){
							el.update({color: "lightgreen"});
						}
					}
					return el
				})
              }
            }
          }
        },
        series: [{
          name: 'Countries',
          mapData: mapData,
        }, {
          name: 'Countries options',
          visible: false,
          data: data
        }]
      });
    });
  </script>

</head>

<body>
  <div id="container"></div>
</body>

</html>

1 Ответ

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

Ответ прост - вы используете функцию стрелки, которая не поддерживается в IE11: caniuse.com/#feat=arrow-functions

Если вы хотите, чтобы ваш код работал на IE11, недостаточно изменить функцию стрелки на обычную функцию, потому что у вас будет другое this . Используя функцию стрелки, ваш this такой же this , как в вашей функции load (). Но когда вы определяете нормальную функцию () (вместо функции стрелки), ваш этот будет изменен. Вот почему вам нужно определить var chart = this; в вашей функции load () и заменить this на chart в нескольких местах. Здесь у вас есть рабочий код: 

chart: {
      events: {
        load: function() {
          var chart = this;
          for (let i = 0; i < this.series[1].data.length; i++) {
              this.series[0].data.forEach(function(el) {
                if (el['name'] == chart.series[1].data[i].Name) {
                    if(chart.series[1].data[i].status == 'Live'){
                        el.update({color: "lightgreen"});
                    }
                }
                return el
            })
          }
        }
      }
    },

Рабочая демонстрация IE11: https://codepen.io/raf18seb/full/RYjavx/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...