如何在可变饼图中右上角移动数据标签

Question

如何在变量饼图的右上方中移动下面的数据标签足球，而不是显示在底部。我尝试了这些选项

alignTo：'connectors'或alignTo：'toPlotEdges'

但是对我没有任何作用。任何帮助将不胜感激

var total = 80;
Highcharts.chart('container', {
    chart: {
      type: 'variablepie',
      height: 370,
      marginBottom: 50
    },
    credits: {
      enabled: false
    },
    title: {
      text: 'Football vs cricket',
      align: 'center',
      y: -5,
      verticalAlign: 'bottom',
      style: {
        fontFamily: 'proxima_nova_bold',
        fontSize: '20px',
        fontWeight: 'normal',
        color: '#8d99ab',
      }
    },
    subtitle: {
      text: '&nbsp;&nbsp;' + total + '<br/> Total',
      useHTML: true,
      verticalAlign: 'middle',
      y: -20
    },
    xAxis: {
      labels: {
        rotation: 0
      }
    },
    plotOptions: {
      variablepie: {
        size: 220,
        dataLabels: {
          enabled: true,
          connectorColor: '#979797',
          useHTML: true,
          formatter: function () {
            var key;
            if(this.key == 'football'){
              key = 'as football / Lionel Messi';
            }else if(this.key == 'cricket'){
              key = 'as cricket / Sachin Tendulkar';
            }else{
              key = this.key;
            }
            return '<span class=cls1>' + this.y + '</span>' + '<span class=cls2>' +  key + '</span>';
          }
        },
        showInLegend: true,
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
      }
    },
    legend: {
      enabled: false
    },
     series: [{
      minPointSize: 10,
      innerSize: '70%',
      zMin: 0,
      data: [{name: "football", y: 71, z: 30}, {name: "cricket", y: 2, z: 18}]
    }]
});

https://jsfiddle.net/anikettiwari/Lr3zy8qc/2/

Answer 1

您可以尝试实现此处显示的选项之一：https://www.highcharts.com/docs/advanced-chart-features/pie-datalabels-alignment

或使用render回调并手动设置此特定标签的y位置。

演示：https://jsfiddle.net/BlackLabel/2oskhmnd/

  events: {
    render() {
        let chart = this;

        chart.series[0].points[0].dataLabel.attr({y: 10});
        chart.series[0].points[0].connector.hide();
    }
  }

遗憾的是，此解决方案要求将自定义连接器呈现给已移动的dataLabel。您可以使用上面链接中显示的某些方法（pie-datalabels-alignment）或使用SVGRenderer工具渲染路径来做到这一点：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

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