时间戳

首页 > 解决方案 > 对于较小的值，饼图数据标签被隐藏

jquery - 对于较小的值，饼图数据标签被隐藏

问题描述

我正在研究一个 Highcharts，我需要在其中显示小值和大值的数据标签。但由于某种原因，数据标签被隐藏起来了。最后一个、第三个和第四个倒数 1 被隐藏在饼图中

这是我的小提琴

我尝试了几件事

  1. 距离属性小提琴
  2. 使用弯曲距离小提琴
  3. 和自定义 格式化程序

代码：

const options = {
  chart: {
    type: 'pie',
    height: 340,
  },
  title: {
    text: ''
  },
  plotOptions: {
    /* series: {
      dataLabels: {
       distance: 20,
        style: {
          textOutline: false,
          fontWeight: 'normal',
          fontSize: '14px'
        },
        allowOverlap: true
      },
      style: {
        fontSize: '14px'
      }
    }, */
      pie: {
     //   alignTo: 'PlotEdges',
   //  cumulative: -0.25, // Start at 3PM
     //   borderWidth: 0,
        startAngle: 0,
        endAngle: 180,
       // cursor: 'pointer',
        center: [0, 125],
         
          /*   dataLabels : {
                rotation : 15
            }, */
        
        /*  dataLabels: {
                distance: '90%'
          }, */ 
          
       
      }
    },
  series: [{
      innerSize: 155,
      size: 205,
      data: [85,5,1,1,2,1],
      //startAngle: 45
       
    }, {
      innerSize: 105,
      size: 155,
      data: [87,2],
      dataLabels: {
        enabled: false
      }
    }],
    tooltip: {
      useHTML: true,
      shared: true,
      outside: true,
      hideDelay: 700,
      shape: 'square',
      followPointer: false,
      formatter: function () {
        return "<span>" + this.key + ' ' + this.y + "</span><br/>"
      }
    },
    
}

const chart = Highcharts.chart('container', options);

版本：7.0.1

标签： jqueryhighcharts

解决方案

将填充设置为 0 应该可以解决您的问题。

演示：https ://jsfiddle.net/BlackLabel/1gj73hvz/

series: {
  dataLabels: {
    enabled: true,
            padding: 0
  },
},

API：https ://api.highcharts.com/highcharts/series.pie.dataLabels.padding

推荐阅读