解决方法
您无法设置双数据标签,但您可以使用解决方法,这不是完美的,但可能会有所帮助.所以你可以设置use
HTML,然后在formater中返回两个div,首先是适当的datalabel(外部),第二个是内部.然后使用计数器设置id,将每个div的id定义为唯一,然后只需要设置适当的CSS.第一个数据标签的示例可在此处获得：
http://jsfiddle.net/4RKF4/
$(function () {
var chart,counter = 0;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false
},title: {
text: 'Browser market shares at a specific website,2010'
},tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',percentageDecimals: 1
},plotOptions: {
pie: {
allowPointSelect: true,cursor: 'pointer',dataLabels: {
enabled: true,color: '#000000',connectorColor: '#000000',useHTML:true,formatter: function() {
counter++;
return '<div class="datalabel"><b>'+ this.point.name +'</b>: '+ this.percentage +' %</div><div class="datalabelInside" id="datalabelInside'+counter+'"><b>'+ this.point.name +'</b>: '+ this.percentage +' %</div>';
}
}
}
},series: [{
type: 'pie',name: 'Browser share',data: [
['Firefox',45.0],['IE',26.8],{
name: 'Chrome',y: 12.8,sliced: true,selected: true
},['Safari',8.5],['Opera',6.2],['Others',0.7]
]
}]
});
});
});
CSS样式：
.datalabelInside {
position:absolute;
}
#datalabelInside1 {
color:#fff;
left:-150px;
}
