内部和外部的Highcharts pie dataLabels

我想要一个饼图内部和外部的数据标签饼图。 我知道，负距离会显示馅饼内的标签。 但我想在里面和外面。 在外面，我希望显示百分比和点内总和。

Answer 1

您不可能设置双数据标签，但您可以使用解决方法，这不是完美的，但可能会有所帮助。 所以你可以设置useHTML，然后在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}: {point.percentage}%', percentageDecimals: 1 }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', useHTML:true, formatter: function() { counter++; return '
'+ this.point.name +': '+ this.percentage +' %
'+ this.point.name +': '+ this.percentage +' %
'; } } } }, 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; } 

Answer 2

它有一个简单的工作方式

那就是你用不同的数据标签叠加2个馅饼

http://jsfiddle.net/4RKF4/29/

  $(function () { // Create the chart $('#container').highcharts({ chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', y:100 }, title: { text: 'sfs ' }, yAxis: { title: { text: ' ' } }, plotOptions: { pie: { // y:1, shadow: false, // center: ['50%', '50%'], borderWidth: 0, showInLegend: false, size: '80%', innerSize: '60%' , data: [ ['allo', 18], ['asdad', 14], ['asdad', 11], ['asdasd', 10], ['adad', 8], ['asdada', 7], ['adada ada', 7], ['adad', 5], ['asdas',7], ['ada', 3] ] } }, tooltip: { valueSuffix: '%' }, series: [ { type: 'pie', name: 'Browser share', dataLabels: { color:'white', distance: -20, formatter: function () { if(this.percentage!=0) return Math.round(this.percentage) + '%'; } } }, { type: 'pie', name: 'Browser share', dataLabels: { connectorColor: 'grey', color:'black', // y:-10, softConnector: false, connectorWidth:1, verticalAlign:'top', distance: 20, formatter: function () { if(this.percentage!=0) return this.point.name; } } } ] }); });