Javascript Highcharts-如何向标签添加图标

我正在使用highcarts将标签添加到饼图的中心。我正在使用标签配置选项，但我想在其开头添加一个标签，如下所示：

我尝试了多种方法，包括labelFormatter，但似乎没有任何效果。目前我的代码是：

labels: {
  items: [{
   useHTML: true, // Using HTML for label
    //html: "Transactions",
    html: '<img src="https://github.com/tobi-ajala/shell-exercise/blob/master/icons/card.png?raw=true"/>' + "Transactions", // Doesn't work!
    style: {
      fontFamily: 'Arial,Roboto,Helvetica,sans-serif',
      fontWeight: 'bold',
      fontSize: 14,
      verticalAlign: 'middle',
      top: 140,
      left: 460
    }
  }]
},

标签：{
项目：[{
useHTML:true，//使用HTML作为标签
//html:“交易”，
html:“+”事务“，//不工作！
风格：{
fontFamily：“Arial、Roboto、Helvetica、无衬线”，
fontWeight:'粗体'，
尺寸：14，
垂直排列：'中间'，
排名：140，
左：460
}
}]
},

---

请参见此处的JS FIDLE:

标签。项目

似乎不支持图像

您可以使用

renderer

创建带有作为参数传递的确切内部HTML的标签。请注意，

useHTML

选项（第7个参数）已启用。然后，您可以通过CSS设置样式

this.renderer.label("<div class='transactions'>
   <img src='https://github.com/tobi-ajala/shell-exercise/blob/master/icons/card.png?raw=true'/>
         Transactions</div>", 120, 125, null, null, null, true).add();

this.renderer.label（“
事务”，120125，null，null，null，true）；

演示：

---

API引用：

你知道如何在中间对齐图像和文本吗？垂直排列：中部；似乎不起作用：通过渲染器渲染的标签具有绝对位置，它们的父级是整个容器-您需要使用renderer.label函数的第二（x）和第三（y）个参数来正确定位它们。另一个解决方案是将标签代码移动到标题，并使用useHTML，方法与我在答案中所做的相同。例子：