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

我正在使用Highcharts饼图。
图表有一些大的楔子，然后有几个较小的楔子。我可以使用距离将数据标签拉入楔形区域，或者将其放在楔形区域外，但我想要混合。我希望胖馅饼在馅饼上有标签，但我想要外面的标签。
我可以根据值更改格式化函数中标签的颜色（这使用span style =“color：'+ color'”）。我试图增加距离，但它不起作用。任何人都可以帮助我吗？谢谢，布丽塔Highcharts，如何根据值更改饼图中的可记录距离

来源

2016-02-29 itsNotABlanket

饼图中的dataLabels距离不能每个数据点的重写（参见PieSeries类源中的翻译功能）。

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

相同的概念将适用于您。但不是改变每个系列的尺寸，而是有条件地更改每个系列的数据标签距离： 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 
    }); 
});

来源

2016-02-29 19:42:30

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

回答

相关问题