Highcharts 可变饼图答案

【问题标题】：Highcharts Variable PieHighcharts 可变饼图
【发布时间】：2021-07-15 12:04:27
【问题描述】：

有什么方法可以在变量 pie 中设置相对于饼图半径的 z 值（以 % 表示）？

因为如果我为 1 个饼图设置 z 值等于 100，而为另一个饼图设置为 10，那么第二个饼图不会与第一个饼图成比例绘制，而是渲染得比它应该表示的 10 和 100 间隙更大.

Highcharts.chart('container', {
  chart: {
    type: 'variablepie',
  },
  series: [{
    data: [{
      y: 505370,
      z: 10
    }, {
      y: 551500,
      z: 50
    }, {
      y: 312685,
      z: 100
    }]
  }]
});

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

<div id="container"></div>

这里的 z 值是 10、50 和 100，但在图中每个圆弧的半径并没有按比例表示它们。

或者是否可以设置任何其他属性以使其成比例？

【问题讨论】：

标签： javascript jquery highcharts

【解决方案1】：

您可以使用sizeBy 选项。更多details：

此选项与 Z 值在饼图切片中的表示方式有关。饼图切片的值可以用切片的面积或半径来表示。默认值 area 最符合人类对每个饼图大小的感知。

它的默认值是area所以你需要把它改成radius：

Highcharts.chart('container', {
  chart: {
    type: 'variablepie',
  },
  series: [{
    sizeBy: 'radius',
    data: [{
      y: 505370,
      z: 10
    }, {
      y: 551500,
      z: 50
    }, {
      y: 312685,
      z: 100
    }]
  }]
});

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

<div id="container"></div>

【讨论】：