Question

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

Answer 1

有一个简单的解决方法

您可以使用不同的数据标签覆盖2个饼图

    $(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;

                        }
                    }
                }
            ]
        });
    });

Answer 2

您无法设置双重数据标签，但您可以使用变通方法，这不是完美的，但可能会有所帮助。所以你可以设置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}: <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;
}

Highcharts pie dataLabels内外

2 个答案: