Highcharts pie dataLabels inside and outside

问题:

i want a pie-chart with datalabels inside and outside a pie. i know, with a negative distance it shows the label inside the pie. but i want it inside and outside. outside i want display the percentage and inside the total sum of the point.

回答1:

You have no possibility to set double datalabels, but you can use workaround, which is not perfect but maybe will be helpful. So you can set useHTML, then in formater return two divs, first appropriate datalabel (outside) and second with inside. Then set id with counter which define each div's id as unique, then only what you need is set appropriate CSS. Example of position one datalabel is available here: 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 styles:

.datalabelInside {
position:absolute;
}

 #datalabelInside1 {
color:#fff;
left:-150px;
}

回答2:

there is a easy work arround for it

that is you overlay 2 pie with diferent datalabels

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;

                        }
                    }
                }
            ]
        });
    });