Question

地图在所有浏览器（例如chrome，Firefox）中均显示，但该地图未在IE 11中显示，此代码在chrome中有效，但一旦添加加载事件并循环数据，该代码就无法在IE11中正常工作，答案是否可观？但是如果我也使用load事件，它可以在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>

Answer 1

答案很简单-您正在使用IE11不支持的箭头功能：caniuse.com/#feat=arrow-functions

如果要使代码在IE11上运行，将箭头功能更改为普通功能是不够的，因为您将有不同的 this 。使用箭头功能，您的 this 与您的load（）函数中的 this 相同。但是，当您定义普通的function（）（而不是箭头功能）时，您的 this 将会更改。这就是为什么您需要在load（）函数中定义 var chart = this; ，然后在几个地方将 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/

如何解决高地图中的Internet浏览器问题？

1 个答案: