Question

正如我在example所看到的那样，我试图偏离Highcharts饼图的中心位置，但是大部分的标签偏向左侧并被裁剪。有没有办法将它更多地转移到有空间的顶部？我也希望能够移动连接器。如果必须，我愿意硬编码容器中的位置，因为大小永远不会改变。

代码：

$(function () {
    Highcharts.setOptions({
        lang: {
            thousandsSep: ','
        },
        chart: {
            style: {
                fontFamily: 'Myriad'
            }
        },
        colors: [
            'rgb(97,70,59)',
            'rgb(129,123,59)',
            'rgb(0,125,171)',
            'rgb(240,50,46)',
            'rgb(175,186,102)',
            'rgb(228,21,58)',
        ]
    });

    var options = {

        chart: {
            renderTo: 'container',
            align: 'top',
            type: 'pie'
        },

        credits: {
            enabled: false,
        },
        exporting: {
            enabled: false
        },
        title: {
            text: ''
        },
        plotOptions: {
            pie: {
                center: ['30%', '60%'],
                animation: false,
                borderWidth: 3,
                dataLabels: {
                    enabled: true,
                    crop: false,
                    overflow: 'none',
                    softConnector: false,
                    connectorWidth: 2,
                    formatter: function() {
                        return this.key + "<br>" + this.percentage.toFixed(2) + '%';
                    }
                }
            }
        },
        xAxis: {
            categories: []
        },
        series : [],
    };

    var series = {
        data: [
            {
                type:'pie',
                name: 'Example 1',
                y: 5000
            },
            {
                type:'pie',
                name: 'Example 2',
                y: 2150
            },
            {
                type:'pie',
                name: 'Example 3',
                y: 3000
            },
            {
                type:'pie',
                name: 'Example 4',
                y: 8000
            },
            {
                type:'pie',
                name: 'Example 5',
                y: 5000
            },
            {
                type:'pie',
                name: 'Example 6',
                y: 50000
            }
        ],
        size: '85%', // added for the donut view
        innerSize: '75%', // updated for the donut view
    };

    options.series.push(series);
    var chart = new Highcharts.Chart(options);
});

Answer 1

此时这是图表的默认行为。您可以禁用主数据标签并使用Renderer添加自定义形状，如文本或路径。

您也可以在我们的userVoice service中发布您的建议并投票赞成。

高脚椅饼图移动单个数据标签

1 个答案: