带负百分比的Highcharts半甜甜圈饼

我正在尝试实现两个半甜甜圈饼图组合系列，用我的数据显示今年和去年的百分比。 同时，我试图用数据覆盖另一个系列，这些数据将代表年环比百分比的增加或减少，在我的外部饼图外显示为“+50%”、“-60%”

因为YOY可以是负数，这就是馅饼。我读到Pie不适合放负数，但在我的用例中，客户从视觉上感觉这将非常好

我尝试将年环比数据用负数乘以（-1）并放入饼图中，我可以表示饼图之外的数字，但不能将“+”或“-”和“%”作为值后缀。 我在这里有一个工作示例，但这是2个数据系列。。。我的第三个系列将是“年环比%”，外部有datalabel显示，这里没有添加，因为带有负片的第三个系列会带来一个奇怪的甜甜圈

有人知道如何实现这个解决方案，以常规数据标签的形式在外部用YOY表示系列3吗

Highcharts.chart（'container'{
图表：{
plotBackgroundColor:null，
绘图边框宽度：0，
plotShadow:false
},
标题：{
文本：“浏览器
共享
2017”，
对齐：'居中'，
垂直排列：'中间'，
y:60
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
数据标签：{
启用：对，
距离：-50，
风格：{
fontWeight:'粗体'，
颜色：“白色”
}
},
startAngle:-90，
端角：90，
中心：['50%，'75%']，
尺寸：'110%'
}
},
系列：[{
键入“pie”，
内部尺寸：“50%”，
数据标签：{
启用：对，
//里面:对,，
距离：-70，
},
数据：[
[LYA'，58.9]，
[LYB'，28.9]，
[LYC'，30.29]，
]
},
{
键入“pie”，
名称：“浏览器共享”，
内部尺寸：“70%”，
数据标签：{
启用：对，
//里面:对,，
距离：-20，
},
数据：[
[CYA'，20]，
[CYB'，18.9]，
[CYC'，70.29]，
]
}]
});

---

据我所知-您只想添加带有计算年环比值的数据标签，对吗？还是要添加整个系列？如果只是一个dataLabels，则有一个如何通过添加自定义dataLabels来实现的指南：

events: {
  render() {
    let chart = this,
      yoyValue,
      x,
      y;

    chart.series[1].points.forEach((p, i) => {

      if (chart['label' + i]) {
        chart['label' + i].destroy();
      }

      yoyValue = Math.floor(((p.y - chart.series[0].points[i].y) / p.y) * 100);
      x = p.dataLabel.translateX - (p.shapeArgs.end == 0 ? -40 : 30);
      y = p.dataLabel.translateY;

      chart['label' + i] = chart.renderer.text(yoyValue + '%', x, y).attr({
        zIndex: 100,
      }).css({
        fontWeight: 'bold',
        color: 'white',
        textOutline: '1px contrast'
      }).add();
    })
  }
}

演示：

API:

---

API:

谢谢你，塞巴斯蒂安。。。实际上，我想在同一张图表中添加整个系列，这将很好地在饼图中的每个年环比部分标记它。。。这样，YOY将与每个饼的CY和LY对齐。。有没有更简单的方法来实现它，并用%保留“+”或“-”，可能还有带上下箭头的插入符号？您能用第三个系列复制它吗？尝试在没有负值的情况下执行此操作，稍后我将尝试编辑dataLabel以显示负值。您好，我已将此添加到JFIDLE。看看负数是如何把半圆饼搞砸的。。。仅供参考，年环比实际上是全新的数据系列，而不是基于CY或LY计算的。thanks@pauldx-我不确定我是否很了解你。。。您希望如何显示YOY的图形解释？例如，我使用这个公式来计算年环比：（（当前年份-去年）/去年）-因此对于第一个数据，它将是（20-58.9）/58.9=-1.94。现在，这个值应该如何呈现在饼图上？因为现在，它看起来是这样的（作为一个正值）。我们可以自定义工具提示和数据标签，以将该值显示为负值，但是图形图表的解释应该是什么样的呢？

events: {
  render() {
    let chart = this,
      yoyValue,
      x,
      y;

    chart.series[1].points.forEach((p, i) => {

      if (chart['label' + i]) {
        chart['label' + i].destroy();
      }

      yoyValue = Math.floor(((p.y - chart.series[0].points[i].y) / p.y) * 100);
      x = p.dataLabel.translateX - (p.shapeArgs.end == 0 ? -40 : 30);
      y = p.dataLabel.translateY;

      chart['label' + i] = chart.renderer.text(yoyValue + '%', x, y).attr({
        zIndex: 100,
      }).css({
        fontWeight: 'bold',
        color: 'white',
        textOutline: '1px contrast'
      }).add();
    })
  }
}