在 highcharts 标签中添加图像答案

【问题标题】：Add image in highcharts labels在 highcharts 标签中添加图像
【发布时间】：2015-04-17 11:04:10
【问题描述】：

我正在尝试绘制 Highchart 并将图像和文本放在切片上。但不知何故 SVG 图像没有得到显示。

下面是小提琴链接

我用来在 Series 对象中显示图像的一些代码是

formatter : function(){
            return '<svg class="icon">
                    <circle cx="10" cy="10" r="10" fill="red"  /></svg> 7 
                    %'  ; 
},

【问题讨论】：

请注意，在 SVG 中渲染 SVG 会在 dataLabels 下方渲染工具提示。您还需要为工具提示设置useHTML（使用@faraz 的回答）并在 CSS 中设置所有背景/边框/阴影而不是 Highcharts 默认值。问题示例：jsfiddle.net/mo8dfztx/5

标签： javascript jquery svg highcharts

【解决方案1】：

Highchart 的默认渲染使用 SVG 文本节点，它只渲染文本。您需要强制标签使用 HTML：

dataLabels:{
    useHTML: true,
    formatter : function(){
         return '<svg class="icon"><circle cx="10" cy="10" r="10" fill="red"  /></svg> 7 %'  ; 
    },
}

请注意，这会导致一些非常古怪的渲染，因此您需要相应地调整 CSS。

【讨论】：

我现在的担忧是一样的.. 我希望标签正好位于每个带有图标的切片的中心.. 请建议
我接受了这个作为答案，因为这解决了图像问题，但仍将其集中在每个 Slice 上并没有解决
抱歉，我没有时间深入研究。希望这有助于您进一步前进。