在highcharts的tspan標簽內顯示圖像

Question

我正在使用highcharts庫顯示餅圖，試圖在圖表上的標簽文本之前顯示圖像/圖標。 我試圖使用在svg中顯示圖像的方式添加它，但是沒有用。 因為highcharts將我的圖片添加到了標簽的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>標記

我要顯示圖像，我該怎么辦？ 可能嗎 ？ 這是我的小提琴

Answer 1

我將使用dataLabels.useHTML標志設置為true的html標簽，請參閱：

    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呈現。 在這種情況下，請參閱此問題 。