我可以使用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)'}] 
}, ... ];