javascript - HighCharts 图形无法在 Internet Explorer 上运行

Question

我建立了一个网站，其中包含来自 HighCharts 的大量图形和 map 。它们都在 Firefox、Safari、Chrome、Opera、Microsoft Edge 和手机上运行良好，但由于某种原因，它们都无法在任何版本的 Internet Explorer 上呈现。我实际上希望只是让它在 IE 11 上渲染，而不用担心其余的，因为微软不再支持它们，但到目前为止，我无法找到问题。我已附上我正在使用的较简单图形之一的代码，供人们查看。

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

<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