甜甜圈图表图标图标居中 - Highchart

Question

我正在使用Highchart pie-donut图表进行项目，我正面临着关于甜甜圈不同切片中图标居中的问题。我在圆环图中有3个切片，对于每个切片，需要渲染特定图标（使用URL）。

这是将图标附加到相应切片甜甜圈的特定代码。

var chartIconsUrl = {
 'suitcase': 'https://s18.postimg.org/jju1bg1o9/suitcase.png',
 'home': 'https://s18.postimg.org/xnrqpb9rt/home.png',
 'notes': 'https://s13.postimg.org/a5r39jv8n/notes.png'
}

dataLabels : {
  enabled : true,
  useHTML : true,
  formatter : function() {
   if(this.y!=0)
     return '<img src = ' + chartIconsUrl[this.key] + '><img>';
   },
   distance : -30
}

https://jsfiddle.net/dsharm/anva3gaz/

请注意，图标在不同浏览器的不同位置呈现，IE图标向下移动。我也有跨浏览器兼容性的要求。

编辑：

formatter: function(){
 return '<img style="width:20px; height: 20px" src =' + chartIconsUrl[this.key] + '><img>';
}

我不能直接在标签上添加宽度，高度，x和y，因为我需要变量切片大小，即y值可以动态变化。