Question

我正在使用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
    }
});

});

Answer 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

Answer 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/

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

2 个答案: