高图tspan标记内显示图像

Question

我正在使用highcharts库来显示饼图，我试图在图表上的标签文本之前显示图像/图标。 我试图用svg显示图像的方式来添加它，但它不起作用。因为高分辨率图像在标签上的onclick动作中添加了我的图像。

format: '<image width="40" height="40" xlink:href="{point.img}" /> <span><defs>' 
    +'<pattern id="{point.name}" patternUnits="userSpaceOnUse" width="100" height="100">' 
    +'<image xlink:href="{point.img}" x="0" y="0" width="30" height="30" />' 
    +'</pattern>' 
+'</defs></span> {point.name} <span style="fill:url(#{point.name}); stroke: red; stroke-width:2px;"></span>: {point.percentage:.1f} %' 

我尝试了两种方式中的一种与<image/>标签，另一个<defs>和<pattern>标签

我想显示的图像，我该怎么办呢？可能吗 ？这里是我的fiddle

Answer 1

我会使用HTML标签与dataLabels.useHTML标志设置为true，请参阅：

plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: true, 
       useHTML: true, 
       format: '<img width="40" height="40" src="{point.options.img}" /> <span> {point.name} <span style="fill:url(#{point.name}); stroke: red; stroke-width:2px;"></span>: {point.percentage:.1f} %', 
       style: { 
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
       } 
      } 
     } 
    }, 

演示：http://jsfiddle.net/jc45j7Ln/2/

注意：由于标签以HTML格式呈现，然后SVG的工具提示将在HTML下呈现。在这种情况下，请参阅this question。