javascript - highcharts - donut chart - 内外标签

Question

我使用 highcharts 库创建了一个圆环图。

我需要两个不同的数据标签，一个在外面，另一个在里面。

预期结果:

这是一个 fiddle :http://jsfiddle.net/FQxf4/

JS:

$(function () {
    $('#container5').highcharts({

        chart: {
            type: 'pie',
            options3d: {
                enabled: false,
                alpha: 0
            }
        },

        colors: ['#081969', '#0e2569', '#1e3b81', '#284893', '#30509b'],
        title: {
            text: ''
        },tooltip: {
            enabled: false
        },
        plotOptions: {
            pie: {
                innerSize: 130,
                depth: 45
            }
        },
        series: [{
            name: 'Delivered amount',
            data: [
                ['31%', 31],
                ['25%', 25],
                ['22%', 22],
                ['15%', 15],
                ['7%', 7]
            ]
        }]
    });
});

Answer 1

您可以使用两个相同的系列。像这样:

series: [{
        name: 'Delivered amount',
        data: [
            ['31%', 31],
            ['25%', 25],
            ['22%', 22],
            ['15%', 15],
            ['7%', 7]
        ],
        size: '60%',
        dataLabels: {
                formatter: function() {
                    return this.y
                },
                distance:10
            }
    },{
        name: 'Delivered amount',
        data: [
            ['3', 31],
            ['2', 25],
            ['2', 22],
            ['5', 15],
            ['7', 7]
        ],
        size: '60%',
        dataLabels: {
                formatter: function() {
                    return this.point.name
                },
                color: 'white',
                distance:-10
            }
    }]

DEMO