时间戳

首页 > 解决方案 > 如何解决 High Maps 中的互联网浏览器问题？

highcharts - 如何解决 High Maps 中的互联网浏览器问题？

问题描述

地图在所有浏览器（如 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>

标签： highcharts

解决方案

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

如果你想让你的代码在 IE11 上运行，仅仅将箭头函数改为普通函数是不够的，因为你会有不同的this。使用箭头函数，您的this与您的 load() 函数中的this相同。但是当你定义一个普通的 function() （而不是箭头函数）时，你的this将被改变。这就是为什么你需要定义var chart = this; 在您的 load() 函数中并将其替换为几个地方的图表。在这里你有工作代码：

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/

推荐阅读