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
  });
});

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

1 个答案: