Highcharts-如何获得名称以显示在饼形图中？

Question

I've got a pie chart up and running and the client I'm doing it for is requesting the name, which appears in the tooltip hover, to be in the pie wedge so that when it's printed out the names appear. I have tried using a png to overlay the chart with no luck, tried distance: -60 and

dataLabels: {inside: true,}

but none of them respond. I asked here yesterday and someone mentioned that there's a line in the highcharts-more.src.js file which reads: "Align column data labels outside the columns. #1199." - is there anyway I can specify in the following JS to have the data labels, or names in this case, appear in the pie slices?

JS:

$(function () {

        $('#container').highcharts({

            chart: {
                polar: true
            },

            title: {
                text: 'Chart'
            },

            pane: {
                startAngle: 0,
                endAngle: 360

            },
            xAxis: {
                tickInterval: 45,
                min: 0,
                max: 360,
                labels: {
                    formatter: function () {
                        return;
                    }
                }
            },



            yAxis: {
                min: 0
            },

            plotOptions: {
                series: {
                    pointStart: 0,
                    pointInterval: 45,
                    dataLabels: {
                        inside: true,
                        offset: -100,
                        formatter: function() {
                            if(this.y !== 0) {
                                 return this.y.toFixed(1);   
                            }
                        }
                    }
                },
                column: {
                    grouping: false,
                    pointPadding: 0,
                    groupPadding: 0
                }
            },

            colors: [
                '#FFD700',
                '#458B00',
                '#0099CC'],

            series: [

            {
                type: 'column',
                name: 'Behaviour',
                shadow: true,
                data: [
                        {y:0},
                        {y:0},
                        {y:0},
                        {y: 78, name: 'Be Deliberate', inside: true}, 
                        {y: 82, name: 'Consistent, reliable', inside: true},
                        {y:0},
                        {y:0},
                        {y:0}
                    ],
                dataLabels: {                
                    enabled: true,
                    inside: true,
                    verticalAlign: 'top',
                    color: '#333333'
                }
            }, {
                type: 'column',
                name: 'Communication',
                shadow: true,
                data: [
                    {y:0},
                    {y:0},
                    {y:0},
                    {y:0},
                    {y:0},
                    {y: 80, name: 'Listen empathy'}, 
                    {y: 76, name: 'Communicate clear'},
                    {y: 88, name: 'Be honest transparent'}],
                dataLabels: {
                    enabled: true,
                    inside: true,
                    color: '#333333'
                }
            }, {
                type: 'column',
                name: 'Action',
                data: [
                        {y: 60, name: 'Act in clients best interests'}, 
                        {y: 70, name: 'Commit to do right thing'}, 
                        {y: 68, name: 'Deliver on promise'},
                        {y:0},
                        {y:0},
                        {y:0},
                        {y:0},
                        {y:0}
                    ],
                shadow: true,
                groupPadding: 0,
                pointPlacement: 'on',
                dataLabels: {
                    enabled: true,
                    inside: true,
                    distance: -60,
                    color: '#333333'
                }
            }]

        });
    });

HTML:

<div id="container" style="min-width: 810px; max-width: 900px; height: 900px; margin: 0 auto"></div>

Here's a fiddle , can anyone help?

Answer 1

You had the correct location however your return was never including the text you need. Try:

dataLabels: {
    inside: true,
    offset: -100,
    formatter: function () {
        if (this.y !== 0) {
            return this.key + ' - ' + this.y.toFixed(1);
        }
    }
}

If you add return modification you will see the same text in the tooltip appear in the dataLabel...And you now also see how that is rather ugly given the length of the text you are trying to render. There are overlaps all over the place. You can try and mitigate this by having the dataLabels moved further out from the bar (it is a bar, not a pie wedge as this is a polar chart and not a pie chart). You can try and mess with the formatting more but I think this is going to get uglier fast.