我可以使用Highcharts为每个饼图片分配不同的半径吗？

Question

我正在使用Highcharts并且它工作得非常棒，我被困在一个我想要绘制饼图的地方，其中每个饼图（在单个饼图中）具有不同的半径。

下面是附加饼图的附图。

你可以跳过将它作为donout或将其设计为特定的。我只是想知道每个扇形切片如何具有不同的半径。

Answer 1

饼图中的每个系列都可以有自己的大小。所以，我堆了一堆馅饼系列来计算它们的开始和结束角度。你需要做一些清理才能让工具提示显示值而不是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)'}]
}, ... ];

Answer 2

Highcharts 6.0.0中引入的variablepie系列类型使用较少的代码处理此问题。在此系列类型中，您可以为每个数据点指定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>