HighCharts 图形无法在 Internet Explorer 上运行答案

【问题标题】：HighCharts graphics not working on Internet ExplorerHighCharts 图形无法在 Internet Explorer 上运行
【发布时间】：2020-01-05 00:23:56
【问题描述】：

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

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

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

如果您能帮我解决这个问题，我将不胜感激。这是相关网站的链接：http://165.22.82.145

以下是我在这个特定示例中使用的脚本，它们位于每个页面的 Header Scripts 下（这是一个 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>

【问题讨论】：

标签： javascript jquery highcharts

【解决方案1】：

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

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

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

【讨论】：

谢谢乔佛里！事实证明这正是问题所在。你今天真是帮了我大忙。我很感激。