我在某个地方卡住了，我需要你的帮助。我想要一个饼图的数据标签功能到变量饼图。这就像数据应该留在图表的中心。
我尝试了这么多的方法，但不适合在中心一样，数据标签指示线。
请检查下面的代码和设计，并帮助我解决我的问题...
This's the design reference for the OutputThis's the current output of my code显示器
这是当前输出的链接...

<script>

  Highcharts.setOptions({
    colors: ['#2B2E33', '#4D5566', '#8590A6', '#B8C3D9', '#02D42E']
  });
  Highcharts.chart('container', {
    chart: {
        type: 'variablepie',
        style: {
          fontFamily: "'Montserrat-Regular', 'sans-serif'",
          letterSpacing: '0.5px',
        },
        events: {
          load: function() {
            var series = this.series[0],
              distance = series.points[0].shapeArgs.r / 2;
            series.update({
              dataLabels: {
                distance: -distance
              }
            });
          }
        }
    },
    title: {
        text: ' '
    },
    tooltip: {
        headerFormat: '',
        pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b> {point.y}<br/>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    legend: {
      symbolRadius: 0,
      itemStyle: {
          fontWeight: 'bold',
          color:'#8590A6',
          textOverflow: 'clip'
      }
    },
    plotOptions: {
      variablepie: {
        allowPointSelect: true,
        cursor: 'pointer',
        //showInLegend: true,
        dataLabels: {
            enabled: true,
            alignTo: 'center',
            format: '{point.percentage:.1f} %',
            distance: -10,
            style:{
              textOutline: 'none',
              fontSize: 15,
              lineHeight: 0,
              color:'white',
              fontWeight: 'bold',
            },
            filter: {
                property: 'percentage',
                operator: '>',
                value: 2
            }
        }
      }
    },
    series: [{
        innerSize: '40%',
        zMin: 0,
        name: 'countries',
        data: [{
            name: 'Google',
            y: 25,
            z: 100,
        }, {
            name: 'Facebook',
            y: 14,
            z: 115
        }, {
            name: 'Pinterest',
            y: 11,
            z: 85
        }, {
            name: 'Yelp',
            y: 10,
            z: 90
        }, {
            name: 'Local Services',
            y: 40,
            z: 140
        }]
    }]
  }, function (chart) {
  $legend = $('#customLegend');
  $.each(chart.series[0].data, function (j, data) {
      $legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div><div class="value" id="">' + data.y + '</div></div>');
  });
  $('#customLegend .item').click(function(){
      var inx = $(this).index(),
          point = chart.series[0].data[inx];
      if(point.visible)
          point.setVisible(false);
      else
          point.setVisible(true);
  });        
  });