Highcharts Drilldown 在 IE 中不起作用

Question

这个小提琴在 IE 浏览器中不起作用，在这里卡了几个小时。帮我解决这个问题。我不知道为什么会出错。该代码在 Mozilla 和 Chrome 中运行良好

Here is JSFiddle

---

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'column',
    events: {
      drilldown: function(e) {
        var chart = this;
        drilldowns = chart.userOptions.drilldown.series;
        series = [];
        e.preventDefault();
        Highcharts.each(drilldowns, function(p, i) {
          if (p.id.includes(e.point.drilldown)) {
            chart.addSingleSeriesAsDrilldown(e.point, p);
          }
        });
        chart.applyDrilldown();
      }
    }
  },
  title: {
    text: 'Scores par paliers'
  },
  xAxis: {
    type: 'category',
    labels: {
      rotation: -45,
      align: 'right',
      style: {
        fontFamily: 'Verdana, sans-serif'
      }
    },
    min: 0
  },
  yAxis: {
    title: {
      text: 'Score'
    },
    max: 100,
    tickInterval: 10,
    min: 0
  },
  legend: {
    enabled: true
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true
      }
    }
  },
  exporting: {
    enabled: true
  },
  tooltip: {
    formatter: function() {
      if (this.point.drilldown) {
        var s = this.key + ' : <b>' + this.y + ' %</b>';
      } else {
        var s = this.key + ' : <b>' + this.y + '</b>';
      }
      return s;
    }
  },
  series: [{
    name: 'Marches',
    colorByPoint: true,
    data: [{
        name: 'september',
        y: 89,
        drilldown: 'step1'
      },
      {
        name: 'october',
        y: 17,
        drilldown: 'step2'
      }, {
        name: 'nov',
        y: 89,
        drilldown: 'step3'
      },
      {
        name: 'dec',
        y: 17,
        drilldown: 'step4'
      }, {
        name: 'jan',
        y: 89,
        drilldown: 'step5'
      },
      {
        name: 'feb',
        y: 17,
        drilldown: 'step6'
      },
    ]
  }, {
    type: 'spline',

    data: [{
        name: 'september',
        y: 89,
        drilldown: 'step1'
      },
      {
        name: 'october',
        y: 17,
        drilldown: 'step2'
      }, {
        name: 'nov',
        y: 89,
        drilldown: 'step3'
      },
      {
        name: 'dec',
        y: 17,
        drilldown: 'step4'
      }, {
        name: 'jan',
        y: 89,
        drilldown: 'step5'
      },
      {
        name: 'feb',
        y: 17,
        drilldown: 'step6'
      },
    ]
  }],
  drilldown: {
    drillUpButton: {
      relativeTo: 'spacingBox',
      position: {
        y: 0,
        x: -50
      }
    },
    series: [{
        id: 'step1',
        name: 'Step 1',
        type: 'column',
        data: [
          ['Game 1', 100],
          ['Game 2', 100],
          ['Game 3', 100]
        ]
      },
      {
        id: 'step2',
        name: 'Step 2',
        type: 'column',
        data: [
          ['Game 1', 0],
          ['Game 2', 100],
          ['Game 3', 0]
        ]
      },
      {
        id: 'step1',
        name: 'Step 1',
        type: 'spline',
        data: [
          ['Game 1', 83],
          ['Game 2', 82],
          ['Game 3', 79]
        ]
      },
      {
        id: 'step2',
        name: 'Step 2',
        type: 'spline',
        data: [
          ['Game 1', 0],
          ['Game 2', 100],
          ['Game 3', 0]
        ]
      },
      {
        id: 'step3',
        name: 'Step 3',
        type: 'column',
        data: [
          ['Game 1', 100],
          ['Game 2', 100],
          ['Game 3', 100]
        ]
      },
      {
        id: 'step4',
        name: 'Step 4',
        type: 'column',
        data: [
          ['Game 1', 0],
          ['Game 2', 100],
          ['Game 3', 0]
        ]
      },
      {
        id: 'step3',
        name: 'Step 3',
        type: 'spline',
        data: [
          ['Game 1', 83],
          ['Game 2', 82],
          ['Game 3', 79]
        ]
      },
      {
        id: 'step4',
        name: 'Step 4',
        type: 'spline',
        data: [
          ['Game 1', 0],
          ['Game 2', 100],
          ['Game 3', 0]
        ]
      },
      {
        id: 'step5',
        name: 'Step 5',
        type: 'column',
        data: [
          ['Game 1', 100],
          ['Game 2', 100],
          ['Game 3', 100]
        ]
      },
      {
        id: 'step6',
        name: 'Step 6',
        type: 'column',
        data: [
          ['Game 1', 0],
          ['Game 2', 100],
          ['Game 3', 0]
        ]
      },
      {
        id: 'step5',
        name: 'Step 5',
        type: 'spline',
        data: [
          ['Game 1', 83],
          ['Game 2', 82],
          ['Game 3', 79]
        ]
      },
      {
        id: 'step6',
        name: 'Step 6',
        type: 'spline',
        data: [
          ['Game 1', 0],
          ['Game 2', 100],
          ['Game 3', 0]
        ]
      }
    ]
  }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" style="width:100%;height:400px;">
</div>

Answer 1

向下钻取在 IE 中不起作用，因为您使用的包含方法在 IE 中不受支持。对方法使用 polyfill 方法将使其工作。

if (!String.prototype.includes) {
     String.prototype.includes = function() {
         'use strict';
         return String.prototype.indexOf.apply(this, arguments) !== -1;
     };
 }

这是更新后的code，可在 IE 中使用。