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

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