我可以使用Highcharts爲每個餅圖片分配不同的半徑嗎？

Question

我正在使用Highcharts，它工作得很好，我被困在一個地方，我想繪製一個餅圖，每個餅圖（在一個餅圖中）有不同的半徑。

下面是映射餅圖的圖片。

您可以跳過使其成爲donout或設計它這個具體的。我只想知道每個餅圖片可以有不同的半徑。

Answer 1

的variablepie系列類型，在Highcharts介紹6.0.0，用較少的代碼處理這個問題。在此係列類型中，您可以爲每個數據點指定z-參數以更改其z大小。

例如（JSFiddle，documentation）：

Highcharts.chart('container', { 
    chart: { 
     type: 'variablepie' 
    }, 
    title: { 
     text: 'Variable pie' 
    }, 
    series: [{ 
     minPointSize: 10, 
     innerSize: '20%', 
     zMin: 0, 
     name: 'countries', 
     data: [{ 
      name: 'Pune', 
      y: 35, 
      z: 25 
     }, { 
      name: 'Mumbai', 
      y: 30, 
      z: 20 
     }, { 
      name: 'Nagpur', 
      y: 15, 
      z: 15 
     } , { 
      name: 'Thane', 
      y: 25, 
      z: 10 
     }] 
    }] 
}); 

這就要求包括：

<script src="https://code.highcharts.com/modules/variable-pie.js"></script> 

Answer 2

餅圖中的每個系列都可以有自己的大小。所以，我堆積了一堆餡餅系列，計算它們的開始和結束角度。你必須做一點清理才能讓工具提示顯示值而不是100，但我認爲這是一個可行的解決方案。

注意：下面的代碼假設數據點加上100，這是一個糟糕的假設。虛擬修復了他在小提琴中的假設http://jsfiddle.net/58zfb8gy/1。

http://jsfiddle.net/58zfb8gy/

$(function() { 
    var data = [{ 
    name: 'Thane', 
    y: 25, 
    color: 'red' 
    }, { 
    name: 'Nagpur', 
    y: 15, 
    color: 'blue' 
    }, { 
    name: 'Pune', 
    y: 30, 
    color: 'purple' 
    }, { 
    name: 'Mumbai', 
    y: 30, 
    color: 'green' 
    }]; 
    var start = -90; 
    var series = []; 
    for (var i = 0; i < data.length; i++) { 
    var end = start + 360 * data[i].y/100; 
    data[i].y = 100; 

    series.push({ 
     type: 'pie', 
     size: 100 + 50 * i, 
     innerSize: 50, 
     startAngle: start, 
     endAngle: end, 
     data: [data[i]] 
    }); 
    start = end; 
    }; 
    $('#container').highcharts({ 
    series: series 
    }); 
}); 

另一種方式我幻想過，我不喜歡爲多，是讓每個系列有看不見的點：

series = [{ 
    type: 'pie', 
    size: 100, 
    innerSize: 50, 
    data: [{y:25, color: 'red'}, {y:75, color:'rgba(0,0,0,0)'}] 
},{ 
    type: 'pie', 
    size: 150, 
    innerSize: 50, 
    data: [{y:25, color: 'rgba(0,0,0,0)'},{y:15, color: 'blue'}, {y:60, color:'rgba(0,0,0,0)'}] 
}, ... ];