Highcharts饼图数据标签内外 [英] 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.

推荐答案

您无法设置双重数据标签，但您可以使用解决方法，这不是完美的，但可能会有所帮助。所以你可以设置useHTML，然后在formater中返回两个div，第一个适当的datalabel（外部），第二个用inside。然后将id设置为counter，将每个div的id定义为唯一，那么只需要设置合适的CSS。位置一数据标签的例子可以在这里找到： http://jsfiddle.net/4RKF4/

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样式：

CSS styles:

.datalabelInside {
position:absolute;
}

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

这篇关于Highcharts饼图数据标签内外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！