Highcharts - 如何将图标添加到标签答案

【问题标题】：Highcharts - how to add icons to a labelHighcharts - 如何将图标添加到标签
【发布时间】：2017-09-11 11:01:46
【问题描述】：

我正在使用 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
    }
  }]
},

请在此处查看 JS Fiddle：http://jsfiddle.net/tobitobetoby/1fqvzpdn/22/

【问题讨论】：

标签： javascript html highcharts

【解决方案1】：

labels.items 似乎不支持图片。

您可以使用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();

演示：http://jsfiddle.net/kkulig/p4nnxjq1/

API 参考：http://api.highcharts.com/highcharts/Renderer.label

【讨论】：

你知道怎么让图片和文字居中对齐吗？垂直对齐：中间；似乎没有工作：S
通过渲染器渲染的标签具有绝对位置，它们的父级是整个容器 - 您需要使用 renderer.label 函数的第二个 (x) 和第三个 (y) 参数来正确定位它们。其他解决方案是将标签代码移动到标题并以与我在答案中相同的方式使用 useHTML。示例：jsfiddle.net/kkulig/p4nnxjq1