如何在餅圖外顯示高位圖工具提示？

Question

我想添加一個圖像的工具提示到甜甜圈餅圖。有沒有一種方法可以將工具提示放在餅圖片之外？

http://jsfiddle.net/jlai403/6eenxom2/4/

$('#container').highcharts({ 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false 
    }, 
    title: { 
     useHTML: true, 
     text: '<span style="text-align:center; top: -50px; position: relative"><h6>such pie much wow</h6><h2>79</h2></span>', 
     verticalAlign: 'middle', 
    }, 

    tooltip: { 
     useHTML: true, 
     pointFormat: "<img src='{point.customValue}' width='50'/>" 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       useHTML: false, 
       enabled: false, 
       style: { 
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
       } 
      } 
     } 
    }, 
    series: [{ 
     type: 'pie', 
     name: 'Some Pie Chart', 
     data: [ 
      {name: 'turtle eating strawberry', y: 25, customValue: 'http://www.tehcute.com/pics/201109/baby-turtle-eats-strawberry.jpg'}, 
      {name: 'red panda', y: 25, customValue: 'http://www.greenvillezoo.com/assets/img/Adopt/RedPanda.png'}, 
      {name: 'doge', y: 50, customValue: 'http://img2.wikia.nocookie.net/__cb20141105223610/r2d/images/7/73/Dogepic.png'} 
     ], 
     size: '60%', 
     innerSize: '50%', 
     startAngle: 0, 
     endAngle: 260 
    }] 
}); 

Answer 1

很抱歉，我沒有信譽發表評論，所以我在這裏加入了更新的小提琴。你的意思是這樣嗎？

http://jsfiddle.net/6eenxom2/6/

更新JS

$(function() { 
$('#container').highcharts({ 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false 
    }, 
    title: { 
     useHTML: true, 
     text: '<span style="text-align:center; top: -50px; position: relative"><h6>such pie much wow</h6><h2>79</h2></span>', 
     verticalAlign: 'middle', 
    }, 

    tooltip: { 
     useHTML: true, 
     //pointFormat: "<img src='{point.customValue}' width='50'/>", 
     formatter:function(){ 
     $('#tooltip').html(this.y + '<img src=' + this.point.customValue + '/>'); 
} 
}, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       useHTML: false, 
       enabled: false, 
       style: { 
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
       } 
      } 
     } 
    }, 
    series: [{ 
     type: 'pie', 
     name: 'Some Pie Chart', 
     data: [ 
      {name: 'turtle eating strawberry', y: 25, customValue: 'http://www.tehcute.com/pics/201109/baby-turtle-eats-strawberry.jpg'}, 
      {name: 'red panda', y: 25, customValue: 'http://www.greenvillezoo.com/assets/img/Adopt/RedPanda.png'}, 
      {name: 'doge', y: 50, customValue: 'http://img2.wikia.nocookie.net/__cb20141105223610/r2d/images/7/73/Dogepic.png'} 
     ], 
     size: '60%', 
     innerSize: '50%', 
     startAngle: 0, 
     endAngle: 260 
    }] 
});}); 

使用格式化功能，顯示圓形切片外部的提示信息。