Highcharts中的径向饼图数据标签

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

也许有人有一个插件,如果它不是一个开箱即用的function?

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

在此处输入图像描述

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

以下是如何做到这一点的简单示例:

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 += py; }); $.each(p.data, function (i, p) { angle2 = angle1 + py * 360 / (allY); angle3 = angle2 - py * 360 / (2 * allY); p.dataLabels.rotation = -90 + angle3; angle1 = angle2; }); }); }; 

首先,我计算所有Y值的总和。 然后我计算所有饼图中间的角度。 然后我以相同的角度旋转数据标签。

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