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，如何根據值更改餅圖中的可記錄距離

回答

相關問題