Javascript 圆环图的Highcharts注释

我正在尝试在甜甜圈之外实现甜甜圈图表注释的位置。 我尝试了“距离”和“x&y”属性，但它们没有提供所需的结果。 有什么方法可以定位甜甜圈图表的注释吗？ JSIDLE链接是：

代码是：

    Highcharts.chart('container', {
  title: {
    text: 'Highcharts Annotations'
  },

  subtitle: {
    text: 'Annotation label shapes'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: false
      }
    }
  },
  series: [{
    type: 'pie',
    innerSize: '90%',
    keys: ['y', 'id'],
    data: [
      [29.9, '0'],
      [71.5, '1'],
      [106.4, '2'],
      [129.2, '3'],
      [144.0, '4'],
      [176.0, '5']
    ]
  }],

  tooltip: {
    enabled: false
  },

  annotations: [{
    labels: [{
      point: '0',
      shape: 'callout',
      y: -65,
      useHTML:true,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }

    }, {
      point: '1',
      shape: 'callout',
      useHTML:true,
      y: -50,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }

    }, {
      point: '2',
      shape: 'callout',
      useHTML:true,
      y: -50,
      x: 10,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }


    }, {
      point: '3',
      shape: 'callout',
      useHTML:true,
      y: 70,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }

    }, {
      point: '4',
      shape: 'callout',
      useHTML:true,
      y: 80,
      formatter: function() {
       return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }

    }, {
      point: '5',
      shape: 'callout',
      useHTML:true,
      y: -60,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }
    }]
  }]
});
function getVal(obj){
alert("value of y is $"+ obj)
}    

Highcharts.chart（'container'{
标题：{
文本：“Highcharts注释”
},
副标题:{
文本：“注释标签形状”
},
打印选项：{
系列：{
数据标签：{
已启用：false
}
}
},
系列：[{
键入“pie”，
内部尺寸：“90%”，
密钥：['y'，'id']，
数据：[
[29.9, '0'],
[71.5, '1'],
[106.4, '2'],
[129.2, '3'],
[144.0, '4'],
[176.0, '5']
]
}],
工具提示：{
已启用：false
},
注释：[{
标签：[{
点：“0”，
形状：“标注”，
y:-65，
是的，
格式化程序：函数（）{
返回“$”+此.y+“”
}
}, {
要点：“1”，
形状：“标注”，
是的，
y:-50，
格式化程序：函数（）{
返回“$”+此.y+“”
}
}, {
要点：‘2’，
形状：“标注”，
是的，
y:-50，
x:10，
格式化程序：函数（）{
返回“$”+此.y+“”
}
}, {
第三点：，
形状：“标注”，
是的，
y:70，
格式化程序：函数（）{
返回“$”+此.y+“”
}
}, {
要点：‘4’，
形状：“标注”，
是的，
y:80，
格式化程序：函数（）{
返回“$”+此.y+“”
}
}, {
要点：“5”，
形状：“标注”，
是的，
y:-60，
格式化程序：函数（）{
返回“$”+此.y+“”
}
}]
}]
});
函数getVal（obj）{
警报（“y值为$”+obj）
}    

如果可以使用datalabel属性进行此操作，请建议该解决方案。

请检查此选项以供参考。您的要求非常独特。 制定自己的算法，根据动态数据放置详图索引

我只得到了两个位置“左”和“右”，用这个我更新了标注的位置

Highcharts.chart（'container'{
标题：{
文本：“Highcharts注释”
},
副标题:{
文本：“注释标签形状”
},
打印选项：{
系列：{
数据标签：{
启用：对，
是的，
连接器宽度：0，
格式化程序：函数（）{
//console.log（this.point.labelPos）
if（此点标签位置[6]=“左”）{
返回“$”+this.y+“”
}
if（this.point.labelPos[6]=“right”）{
返回“$”+this.y+“”
}
}
}
}
},
系列：[{
键入“pie”，
内部尺寸：“70%”，
密钥：['y'，'id']，
数据：[
[29.9, '0'],
[71.5, '1'],
[106.4, '2'],
[129.2, '3'],
[144.0, '4'],
[176.0, '5']
]
}],
工具提示：{
已启用：false
},
});
函数getVal（obj）{
警报（“y值为$”+obj）
}

#容器{
最大宽度：800px；
保证金：0自动；
}
分区标注{
背景色：#444；
背景图像：-moz线性梯度（顶部，#444，#444）；
位置：相对位置；
颜色：#ccc；
填充物：5px；
边界半径：3px；
盒影：0px 0px 20px#999；
边框：1px实心#333；
文本阴影：0 0 1px#000；
/*框阴影：0 1px 0 rgba（255，255，255，0.2）插入*/
}
.callout：：之前{
内容：“；
宽度：0px；
高度：0px；
边框：0.8em实心透明；
位置：绝对位置；
}
.callout.top:：之前{
左：30%；
底部：-20px；
边框顶部：11px实心#444；
}
.callout.bottom:：before{
左：45%；
顶部：-20px；
边框底部：10px实心#444；
}
.callout.left:：之前{
右：-19px；
排名前10%；
左边框：10px实心#444；
}
.callout.right:：之前{
左：-20px；
排名前10%；
右边框：10px实心#444；
}
.标注.左上：：之前{
左：7px；
底部：-20px；
边框顶部：10px实心#444；
}
.标注.右上：：之前{
右：7px；
底部：-20px；
边框顶部：10px实心#444；
}

Hi，欢迎来到stack overflow。有关如何提问和相应更新问题的更多详细信息，请参阅链接。如果我想实现这一点，那将是有帮助的。。无法以类似的方式设置datalabels/批注..并且datalabels/批注是动态的（即基于它们可以移动的值）。如果可能的话，请您帮助我..因为您声明数据标签/注释是动态的（即基于它们可以移动的值）。你最好的选择就是这个。在上面的评论中，您可以看到highcharts提供的最佳注释，但这些注释不符合您的要求。是的。我已经创建了此。但问题是我还需要datalabel的形状类似于图像中datalabel的形状，即“callout”形状。非常感谢。我已经在我的应用程序中尝试了您的解决方案。但现在面临两个问题:一,。我们是否可以动态应用“before”css，即我已使用“this.point.color”属性将datalabel的颜色更改为点颜色，但无法更改凹口颜色。你能检查一下吗？2.这里的数据标签没有响应。有没有办法，我们可以让他们反应灵敏？检查一下，我设法得到了相同的颜色。它是基于颜色的动态。非常感谢兄弟..你已经解决了大部分问题。。我已经在我的代码中应用了它，它工作得很好。但是只有一个关于响应性的问题有待解决。。datalabels没有响应..再次感谢：）datalabels没有响应请添加示例。如果这有助于按照此处的说明标记此帖子已被接受