Highcharts - 如何让名称显示在饼图中？

Question

我已经启动并运行了一个饼图，我正在为其执行此操作的客户请求将显示在工具提示悬停中的名称放在饼楔中，以便在打印出来时显示名称。我尝试过使用 png 来覆盖图表，但没有成功，尝试过 distance: -60 和

dataLabels: {inside: true,}

但他们都没有回应。我昨天在这里问过，有人提到 highcharts-more.src.js 文件中有一行内容为：“对齐列外的列数据标签。#1199。” - 无论如何我可以在下面的 JS 中指定数据标签或在这种情况下的名称出现在饼图切片中吗？

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>

这是fiddle，有人可以帮忙吗？

Answer 1

您的位置正确，但您的 return 从未包含您需要的文本。 试试：

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

如果您添加return 修改，您将看到工具提示中的相同文本出现在 dataLabel 中...而且您现在还看到考虑到您尝试呈现的文本的长度，这是多么难看。到处都有重叠。您可以尝试通过将 dataLabels 移出条形图来缓解这种情况（它是条形图，而不是饼楔，因为这是极坐标图而不是饼图）。您可以尝试更多地弄乱格式，但我认为这会变得更加丑陋。