HighCharts图形在Internet Explorer上不起作用

Question

我建立了一个网站，其中包含许多HighCharts的图形和地图。它们都可以在Firefox，Safari，Chrome，Opera，Microsoft Edge和手机上正常运行，但是由于某些原因，它们都无法在任何版本的Internet Explorer上呈现。实际上，我实际上只是希望将其呈现在IE 11上，而不用担心其余的部分，因为它们不再受到Microsoft的支持，但是到目前为止，我仍然找不到问题。我已经附上了我用来供人们查看的较简单图形之一的代码。

我尝试了一些我在网上找到的常见建议；也就是说，我已经对其进行了设置，以使任何给定页面都没有所需的HighCharts和jQuery脚本的重复，并且该网站的每个页面的开头都有以下meta标记。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

我将很高兴为您解决该问题提供帮助。这是有关站点的链接：http://165.22.82.145

这里是我在此特定示例中使用的脚本，它们位于标题脚本（这是一个WordPress网站）下的每一页上：

<script src="https://code.highcharts.com/highcharts.src.js"></script>

<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

这里是图形代码：

Highcharts.chart('container-2', {
  chart: {
    backgroundColor: '#f3f7fa',
    type: 'column'
  },
  title: {
    text: ''
  },
  subtitle: {
    text: ''
  },
  xAxis: {
    categories: ['ciudadanos', 'instituciones', 'social', 'económica', ],
    title: {
      text: null
    }
  },
  yAxis: {
    min: 1,
    title: {
      text: 'Total'
    },
    max: 10,
    endOnTick: false,
    labels: {
      overflow: 'justify'
    }
  },

  tooltip: {
    valueSuffix: ''
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },

  credits: {
    enabled: false
  },

  exporting: {
    buttons: {
      contextButton: {
        align: 'center',
        x: 0
      }
    },
    chartOptions: {
      chart: {
        events: {
          load: function() {
            this.renderer.image('#',
              275, // x
              20, // y
              75, // width
              40, // height
            ).add();
          }
        }
      }
    }
  },

  series: [{
    name: '2019',
    showInLegend: false,
    color: '#6497b1',
    data: [5.512, 7.592, 0.628, 0.894]
  }, {
    name: '2018',
    showInLegend: false,
    color: '#dc005a',
    data: [6.553, 5.319, 0.499, 1.495]
  }]
});

<script src="https://code.highcharts.com/highcharts.src.js"></script>

<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  
<h2 class="doubletab">Title here <br>2018 - 2019</h2>

<div class="ranking-graphic-wrapper">

  <div id="container-2" style="width:100%; height:450px">

  </div>
</div>

Answer 1

我在Internet Explorer上测试了该问题，控制台在这段代码中显示了一个错误：

load: function() {
    this.renderer.image('#',
    275, // x
    20, // y
    75, // width
    40, // height
).add();

错误可能来自40之后的最后一个逗号，这是Internet Explorer不支持的语法：Trailing commas