hightchart：中心值和箭头

Question

我想用hightchart.js制作这样的图形。所以我想在图表的外部，在他的区域的中心前面和指向它的小三角形上有值。你知道怎么做吗？谢谢您的帮助。

Answer 1

应该可以使用connectorPath，内部Highcharts函数来更改三角形的连接器路径：

var H = Highcharts,
    pick = H.pick;
H.seriesTypes.pie.prototype.connectorPath = function(labelPos) {
    var angle = labelPos[7],
        x = labelPos.x,
        y = labelPos.y,
        M = 'M',
        L = 'L';
    return [
        M,
        x - Math.cos(angle) * 20, y - 20 * Math.sin(angle),
        L,
        labelPos[4] - Math.cos(angle - Math.PI / 3) * 20, labelPos[5] - 20 * Math.sin(angle - Math.PI / 3),
        L,
        labelPos[4] - Math.cos(angle + Math.PI / 3) * 20, labelPos[5] - 20 * Math.sin(angle + Math.PI / 3),
        L,
        x - Math.cos(angle) * 20, y - 20 * Math.sin(angle),
    ];
};

实例：

http://jsfiddle.net/BlackLabel/L96f7d1a/1/

Answer 2

an image to understand much more the position of the values