Can I assign a different radius for each pie slice

问题:

I am using Highcharts and it is working just amazing, i am stuck at a place where i want to plot a pie chart in which every pie slice (in a single pie chart) has a different radius.

Below is the image attached of the expexted pie chart.

You can skip making it a donout or designing it this specific. I just want to know how each pie slice can have different radius.

回答1:

The variablepie series type, introduced in Highcharts 6.0.0, handles this with less code. In this series type you can specify a z-parameter for each data point to alter its z-size.

For example (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
        }]
    }]
});

This requires including:

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

回答2:

Each series in a pie chart can have their own size. So, I stacked a bunch of pie series calculating their begin and end angles. You'll have to do a little clean up to get the tooltips displaying the value instead of 100, but I think it's a workable solution.

Note: The following code makes a bad assumption that the data points add to 100. void fixes that assumption in his fiddle 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
  });
});

Another way I toyed with, that I didn't like as much, was having each series have invisible points:

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