Highcharts pie dataLabels внутри и снаружи

Я хочу круговую диаграмму с datalabels внутри и снаружи пирога. я знаю, с отрицательным расстоянием он показывает этикетку внутри пирога. но я хочу его внутри и снаружи. снаружи я хочу отобразить процент и внутри общей суммы точки.

6
highcharts jquery pie-chart

2 ответов

у вас нет возможности установить двойные метки данных, но вы можете использовать обходной путь, который не идеален, но, возможно, будет полезен. Таким образом, вы можете установить useHTML, а затем в formater вернуть два divs, первый соответствующий datalabel (снаружи) и второй с inside. Затем установите id со счетчиком, который определяет идентификатор каждого div как уникальный, тогда только то, что вам нужно, устанавливается соответствующий CSS. Пример позиции one datalabel доступен здесь: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;
}
4

есть легкая работа arround для него

то есть вы накладываете 2 пирога с различными 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;

                        }
                    }
                }
            ]
        });
    });
4