javascript - Highcharts 中的径向饼图数据标签

Question

如何将数据标签置于饼图的楔形(内部)中心并与饼图半径而不是水平或垂直对齐。这是我所追求的图像。

如果不是开箱即用的功能，也许有人有插件？

或者甚至一些实验代码也会有用。

Answer 1

Highcharts 不提供在饼图中自动旋转数据标签的选项。您可以为数据标签旋转编写自定义函数。

这里是一个简单的例子，你可以怎么做:

var allY, angle1, angle2, angle3,
    rotate = function () {
        $.each(options.series, function (i, p) {
            angle1 = 0;
            angle2 = 0;
            angle3 = 0;
            allY = 0;
            $.each(p.data, function (i, p) {
                allY += p.y;
            });

            $.each(p.data, function (i, p) {
                angle2 = angle1 + p.y * 360 / (allY);
                angle3 = angle2 - p.y * 360 / (2 * allY);
                p.dataLabels.rotation = -90 + angle3;
                angle1 = angle2;
            });
        });
    };

首先，我计算所有 Y 值的总和。然后我计算所有饼图中间的 Angular 。然后我将数据标签旋转相同的 Angular 。

例子: http://jsfiddle.net/izothep/j7as86gh/6/