时间戳

首页 > 解决方案 > 如何在变量饼图中移动右上角的数据标签

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

问题描述

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

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/

标签： highchartspie-chart

解决方案

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

或者使用渲染回调并手动设置这个特定标签的 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#小路

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

推荐阅读