charts - Highcharts，如何根据值更改饼图中的可数据距离

Question

我正在使用 Highcharts 饼图。
该图表有几个大楔形，然后是几个较小的楔形。我可以使用距离将数据标签拉入楔形或将其放在馅饼外，但我想要混合。我希望胖楔子在馅饼上有标签，但小楔子我希望标签在外面。
我可以根据值更改格式化程序函数中标签的颜色(这使用了 span style="color:'+color'")。我尝试为这个跨度增加距离，但它不起作用。
有人能帮我一下吗？
谢谢，
布里塔

Answer 1

饼图中的 dataLabels 距离不能被每个数据点覆盖(请参阅源中 pieSeries 类中的 translate 函数)。

但是，它可以按系列设置。而且，您可以设置一个饼图，其中包含一大堆具有相同中心的系列，每个系列都占据一个楔形。这是一个多一点的工作。
这显示了如何覆盖饼图每个切片的半径:Can I assign a different radius for each pie slice using Highcharts?

同样的概念也适用于您。但不是更改每个系列的大小，而是有条件地更改每个系列的 dataLabels 距离:
http://jsfiddle.net/f7m58t9j/1/

$(function() {
  var data = [{
    name: 'One',
    y: 5,
    color: 'red'
  }, {
    name: 'Two',
    y: 5,
    color: 'blue'
  }, {
    name: 'Three',
    y: 30,
    color: 'purple'
  }, {
    name: 'Four',
    y: 20,
    color: 'green'
  }, {
    name: 'Five',
    y: 30,
    color: 'black'
  }, {
    name: 'Six',
    y: 2,
    color: 'grey'
  }, {
    name: 'Seven',
    y: 1,
    color: 'pink'
  }];

  var total = data.map(function(el){return el.y;})
                                .reduce(function(p,c){
                    return p+c;
                  });
  var newData = data.map(function(el){
    el.count = el.y;
        el.y = el.y*100/total;
    return el;
  });
  data = newData;

  var start = -90;
  var series = [];
  for (var i = 0; i < data.length; i++) {
    var end = start + 360 * data[i].y / 100;
    series.push({
      name:"Count",
      type: 'pie',
      size: 200,
      dataLabels: {
        distance: data[i].y > 20 ? -30 : 30
      },
      startAngle: start,
      endAngle: end,
      data: [data[i]]
    });
    start = end;
  };
  console.log(series);
  $('#container').highcharts({
    series: series
  });
});