0

My site want to use a function when xAxis.afterSetExtremes. But in IE7, when I am selecting a range in xAxis, the selecting cannot be stoped by the second click. Why?

This problem only happened in IE7.

The test page is: Here

The whole code is:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/huidu.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->  
</head>
<body>
<div class="container">
  <div class="panel panel-default">
    <div class="panel-body">
      <div id="diantui" style="min-width:300px;height:400px">
      </div>
    </div>
  </div>


  <script>
   function togglePlotbands() {
       this.plotLinesAndBands.forEach(function(plotband) {
           var ii = 1;
       });
   }

   window.onload = function(){
       var all_data = [];
       all_data.push({x:1495641600000 , y: 1});
       all_data.push({x:1497110300000 , y: 3});
       all_data.push({x:1497210300000 , y: 4});
       all_data.push({x:1497410300000 , y: 3});
       all_data.push({x:1497510300000 , y: 2});
       all_data.push({x:1497715300000 , y: 1});
       all_data.push({x:1500134400000 , y: 2});


       var hc_obj = {
           chart: {
               type: 'line',
               zoomType: 'x',
               renderTo: 'diantui',
               events: {
                   load: function() {
                       togglePlotbands.call(this.xAxis[0]);
                   }
               }
           },
           xAxis: {
               plotBands: [
                   {color: '#FFFFEF',from: 1497110400000,to: 1497715200000,label: {text: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxfsdfsfsdfsfsdf'}}
               ],
               events: {
                   afterSetExtremes: togglePlotbands
               }
           },
           plotOptions: {
               line: {
                   connectNulls: true,
                   marker: {
                       enabled: false
                   },
               }
           },
           series: [
           ]

       };

       hc_obj['series'].push({name: 'xxx', data: all_data, visible: true});

       var chart = new Highcharts.Chart(hc_obj);
   }
  </script>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="/js/ie10-viewport-bug-workaround.js"></script>

</body>
</html>
Dodou Wang
  • 29
  • 7
  • Can you make a live example of the issue, .e.g. on jsfiddle? Currently, your website does not render in IE7 emulator because of syntax errors in your js - you have trailing commas https://stackoverflow.com/questions/5036618/does-internet-explorer-9-choke-on-extra-commas-at-the-end-of-array-and-object-li – morganfree Jul 17 '17 at 12:08
  • jsfiddle didn't work on my IE7, maybe IE7 didn't support jsfiddle? So I have to show the example in my only website. I have already fixed the commas problem, could you please have another try? btw, which IE7 emulator are you using? Everytime when using IE7, I need to swich from Ubuntu to Windows... @morganfree – Dodou Wang Jul 18 '17 at 05:53
  • You have fixed commas, but there is another problem - you are using forEach which is obviously not supported by ie7. – morganfree Jul 18 '17 at 12:19

0 Answers0