Question

示例代码

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Browser market shares in January, 2018'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [
        {
    "name": "Display",
    "y": 0.1,
    "value": 5
  },
        {
    "name": "Paid Social",
    "y": 0,
    "value": 0,
            sliced: true,
            selected: true
  },
  {
    "name": "Direct",
    "y": 14.5,
    "value": 559
  },
  {
    "name": "Referral",
    "y": 2,
    "value": 77
  },
  {
    "name": "Email",
    "y": 4,
    "value": 152
  },

  {
    "name": "Other",
    "y": 0,
    "value": 1
  },
  {
    "name": "Organic Search",
    "y": 23.4,
    "value": 901
  },
  {
    "name": "Meta Search",
    "y": 0.2,
    "value": 5
  },
  {
    "name": "Organic Social",
    "y": 2.4,
    "value": 93
  },
  {
    "name": "Directory",
    "y": 0.2,
    "value": 9
  },
  {
    "name": "Other Advertising",
    "y": 0.1,
    "value": 3
  },
  {
    "name": "OTA Referral Traffic",
    "y": 0.7,
    "value": 26
  },
  {
    "name": "Paid Search",
    "y": 27.8,
    "value": 1068
  },
  {
    "name": "Local",
    "y": 24.5,
    "value": 941
  }]
    }]
});

场景

我想显示 dataLabels ，因为所有y值均为零。

在上面的代码中，我们有"name": "Display" y = 0.1 ，但它仍未显示在饼图中，不知道为什么。如果有人对这个问题有想法，请告诉我。

Answer 1

dataLabels由于空间不足和重叠而被隐藏。作为解决方案，您可以设置：padding: 0

plotOptions: {
    pie: {
        ...,
        dataLabels: {
            padding: 0,
            ...
        }
    }
}

实时演示： https://jsfiddle.net/BlackLabel/g5s27tyb/

API参考： https://api.highcharts.com/highcharts/plotOptions.pie.dataLabels.padding

Highchart饼图与系列不能正常工作

1 个答案: