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

【问题标题】：Can I assign a different radius for each pie slice using Highcharts?我可以使用 Highcharts 为每个饼图分配不同的半径吗？
【发布时间】：2016-02-15 16:55:33
【问题描述】：

我正在使用 Highcharts，它的效果非常好，我被困在一个地方，我想绘制一个饼图，其中每个饼图（在单个饼图中）都有不同的半径。

下面是扩展饼图的图片。

您可以跳过将其制作成甜甜圈或将其设计得如此具体。我只是想知道每个饼图可以有不同的半径。

【问题讨论】：

为什么有人会否决这个问题？ 3个月后也是这样：O

标签： javascript highcharts

【解决方案1】：

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

【讨论】：

惊人的想法。太感谢了。 :)
我想出了这个新的小提琴，我认为它更强大jsfiddle.net/58zfb8gy/1 在这里我计算每个y 值的百分比，然后显示它。每个点都添加了一个计数键，可用于在工具提示或数据标签中显示实际值。
@void 这是有道理的。我只是假设我的数据点增加到 100，这是一个错误的假设。

【解决方案2】：

在 Highcharts 6.0.0 中引入的 variablepie 系列类型可以用更少的代码处理这个问题。在此系列类型中，您可以为每个数据点指定一个 z-参数以更改其 z-size。

例如（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>

【讨论】：