带有负百分比的Highcharts半甜甜圈派

Question

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

由于YOY可能是负数，所以这就是馅饼。我当时读到Pie不适合放置负数，但是从视觉上看，用例中的客户认为这会很棒。

[我试图用负数对YOY数据进行乘以（-1），然后放入饼图，但我有点能代表饼图以外的数字，但不能用“％”表示“ +”或“-”作为values后缀我在这里有工作示例，但同样是2个数据系列...我的第3个系列将是“ YOY％”，外面的数据标签显示未在此处添加，因为带有负数的第3个系列带来了一个奇怪的甜甜圈。

任何人都知道如何实现此解决方案以将YOY Outside作为常规数据标签来表示系列3？

https://codepen.io/pauldx/pen/BayyJaa

Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: 0,
    plotShadow: false
  },
  title: {
    text: 'Browser<br>shares<br>2017',
    align: 'center',
    verticalAlign: 'middle',
    y: 60
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        distance: -50,
        style: {
          fontWeight: 'bold',
          color: 'white'
        }
      },
      startAngle: -90,
      endAngle: 90,
      center: ['50%', '75%'],
      size: '110%'
    }
  },
  series: [{
    type: 'pie',
    innerSize: '50%',
                dataLabels: {
                            enabled: true,
                            // inside: true,
                            distance: -70,
                        },
    data: [
      ['LYA', 58.9],
      ['LYB', 28.9],
      ['LYC', 30.29],

    ]
  },
          {
    type: 'pie',
    name: 'Browser share',
    innerSize: '70%',
            dataLabels: {
                            enabled: true,
                            // inside: true,
                            distance: -20,
                        },
    data: [
      ['CYA', 20],
      ['CYB', 18.9],
      ['CYC', 70.29],
      ]
  }]
});

Answer 1

据我了解-您只想添加具有计算的YOY值的dataLabel，对吗？还是要添加整个系列？如果只是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();
    })
  }
}

演示：https://jsfiddle.net/BlackLabel/p82L4ad1/1/

API：https://api.highcharts.com/highcharts/chart.events.render

API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text