Can I assign a different radius for each piece of cake using Highcharts?

Question

I use Highcharts and it works just awesome, I'm stuck in the place where I want to build a pie chart in which each piece of the pie (in one pie chart) has a different radius.

The image below is attached to an example pie chart.

You can skip by making it an argument or constructing it in this particular form. I just want to know how each piece of the pie can have a different radius.

Answer 1

variablepie, Highcharts 6.0.0, . z - , z -.

(JSFiddle, ):

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. void 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)'}]
}, ... ];