在Redcharts中的径向饼图数据标签 [英] Radial Pie Chart Datalabels in Highcharts

问题描述

如何将数据标签置于饼图的楔形中心（内部），并与饼形半径对齐，而不是水平或垂直。

How can I center the datalabel in the wedge of the pie (inside) and align to the pie radius instead of horizontal or vertical. Here is an image of what I am after.

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

Maybe someone has a plug-in if it is not an out of the box feature?

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

Or even some experimental code would be useful.

推荐答案

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

Highcharts is not providing options for auto rotating data labels in pie chart. You can write your custom function for dataLabels rotation.

这里是一个简单的例子：

Here is simple example how you can do it:

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值的总和。然后我计算所有饼片的中间角度。然后，我以相同的角度旋转数据标签。

First I am calculating sum of all Y values. Then I am calculating the angle of middle of all pie slices. Then I am rotating data labels by the same angle.

例如：
http://jsfiddle.net/izothep/j7as86gh/6/

这篇关于在Redcharts中的径向饼图数据标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！