Question

我已经启动并运行了一个饼图，而我正在执行此操作的客户端请求显示在工具提示悬停中的名称位于饼图中，以便在它出现时＃39 ; s打印出的名字出现了。我尝试使用png覆盖图表但没有运气，尝试distance: -60和

dataLabels: {inside: true,}

但他们都没有回应。我昨天在这里问过，有人提到highcharts-more.src.js文件中有一行显示：＆＃34;对齐列外的列数据标签。。＃1199＆＃34; - 无论如何我可以在下面的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从栏中进一步向外移动来缓解这个问题（它是一个条形，而不是一个饼形楔形，因为这是一个极坐标图而不是饼图）。你可以尝试更多地混淆格式，但我认为这会变得更加丑陋。

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

1 个答案: