Highcharts 数据标签未显示在饼图中每个切片的前面答案

【问题标题】：Highcharts datalabels are not showing infront of each slice in pie chartHighcharts 数据标签未显示在饼图中每个切片的前面
【发布时间】：2016-11-28 20:58:50
【问题描述】：

我正在使用 highcharts 并尝试从中绘制饼图，但遇到了一个奇怪的问题，我的数据标签在切片前没有正确显示，并且仅当它们在饼图中超过 10 个切片时才会发生。我不想显示连接器我只想在饼图附近显示我的数据标签，并且应该在每个切片的前面正确显示。我也不想增加饼图的大小。

Pie Chart

$(function () {
var asset_allocation_pie_chart = new Highcharts.Chart({
    chart: {
        renderTo: 'asset_allocation_bottom_left_div'
    },
    title: {
        text: 'Current Asset Allocation',
        style: {
            fontSize: '17px',
            color: 'red',
            fontWeight: 'bold',
            fontFamily: 'Verdana'
        }
    },
    subtitle: {
        text: '(As of ' + 'dfdf' + ')',
        style: {
            fontSize: '15px',
            color: 'red',
            fontFamily: 'Verdana',
            marginBottom: '10px'
        },
        y: 40
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage}%</b>',
        percentageDecimals: 0
    },
    plotOptions: {
        pie: {
            size: '60%',
            cursor: 'pointer',
            data: [
                ['Investment Grade Bonds', 100],
                ['High Yield Bonds', 200],
                ['Hedged Equity', 300],
                ['Global Equity', 400],
                ['Cash', 500],
                ['Cash', 500],
                ['Hedged Equity', 300],
                ['Global Equity', 400],
                ['Cash', 500],
                ['High Yield Bonds', 200],
                ['Hedged Equity', 300],
                ['Global Equity', 400],
                ['Cash', 500],
                ['High Yield Bonds', 200],
                ['Hedged Equity', 300],
                ['Global Equity', 400],
            ]
        }
    },
    series: [{
        type: 'pie',
        name: 'Asset Allocation',
        dataLabels: {                
            enabled: true,
            color: '#000000',
            connectorWidth: 0,
            distance: 5,
            connectorColor: '#000000',
            formatter: function () {
                return Math.round(this.percentage) + ' %';
            }

        }
    }],
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    }
});

});

【问题讨论】：

标签： javascript jquery charts highcharts

【解决方案1】：

问题是你正在四舍五入，

试试这个，

$(function() {
  var asset_allocation_pie_chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container'
    },
    title: {
      text: 'Current Asset Allocation',
      style: {
        fontSize: '17px',
        color: 'red',
        fontWeight: 'bold',
        fontFamily: 'Verdana'
      }
    },
    subtitle: {
      text: '(As of ' + 'dfdf' + ')',
      style: {
        fontSize: '15px',
        color: 'red',
        fontFamily: 'Verdana',
        marginBottom: '10px'
      },
      y: 40
    },

    plotOptions: {
      pie: {
        size: '60%',
        cursor: 'pointer',
        series: {
          dataLabels: {
            enabled: true,
            format: '{point.name}: {point.y:.1f}%'
          }
        }

      }
    },
    series: [{
      type: 'pie',
      name: 'Asset Allocation',

      data: [
        ['Investment Grade Bonds', 100],
        ['High Yield Bonds', 200],
        ['Hedged Equity', 300],
        ['Global Equity', 400],
        ['Cash', 500],
        ['Cash', 500],
        ['Hedged Equity', 300],
        ['Global Equity', 400],
        ['Cash', 500],
        ['High Yield Bonds', 200],
        ['Hedged Equity', 300],
        ['Global Equity', 400],
        ['Cash', 500],
        ['High Yield Bonds', 200],
        ['Hedged Equity', 300],
        ['Global Equity', 400],
      ]
    }],
    exporting: {
      enabled: false
    },
    credits: {
      enabled: false
    }
  });

});

DEMO

【讨论】：

我只需要在切片之外显示百分比值或数字，但所有数字都应该在切片前面而不是在这里和那里，因为我也不想显示连接器。所以你的答案是不正确的，因为我已经在我的问题中提到它并发布代码。

【解决方案2】：

如果您希望它们像图像中一样放置，您必须自己定位数据标签。

一种方法是根据饼图切片值手动计算位置。另一个，使用相同的数据创建另一个饼系列，使其不可见并使用其数据标签。

series: [{
  enableMouseTracking: false,
  showInLegend: false,
  color: 'transparent',
  colorByPoint: false,
  size: '100%',
  innerSize: '60%',
  dataLabels: {
    style: {
      "color": "black",
      "fontSize": "11px",
      "fontWeight": "bold",
    },
    connectorWidth: 0,
    connectorPadding: 0,
    distance: -35,
    formatter: function() {
      return Math.round(this.percentage) + ' %';
    }
  },

}, {
  name: 'Asset Allocation',
  dataLabels: {
    enabled: false
  },
}]

示例：https://jsfiddle.net/3me3pyyf/

【讨论】：