优化 Highcharts 中饼图的大小

Question

我正在尝试创建一个大小为 320 x 320 像素的饼图，如下所示：

当一个饼被选中时，它应该像这样展开：

我目前所能达到的效果如下图所示，这显然与设计的精神相去甚远。我不确定要拉什么杠杆以尽可能接近要求。请查看我的 CodeSandbox here。

高级要求是：

• 图表大小：320 x 320 像素
• 甜甜圈直径：152px
• 字体系列：Overpass
• 字体大小：
  • 一般：12 像素
  • 标题：16px
  • 总数：32px

我的一些问题：

1. 如何减小“刻度”的大小以避免类别标签上的省略号。或者有没有办法包装类别标签以避免省略号？
2. 如何将数据值添加到每个支出类别？
3. 如何在中间加上总值？
4. 如何控制每个元素的字体大小？
5. 选中后如何做馅饼？
6. 如何抑制悬停时的动画？

到目前为止，我的实现是here。

更新

经过进一步研究并结合@Sebastian Wędzel 建议的更改，我已经能够将实施提升到以下水平：

Answer 1

我看到您已经找到了大部分问题的答案。以下是我对未回答问题的建议：

• 图表大小：320 x 320 px - 您可以定义chart.width 和chart.height

API：https://api.highcharts.com/highcharts/chart.width

• 中间怎么加总值？

您可以使用 SVGRenderer 工具将其呈现为自定义文本。

演示：https://jsfiddle.net/BlackLabel/xbhas3g6/

API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

• 选中后如何做馅饼？

在这里您可能需要将您的系列类型更改为variablepie - 演示：https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/variable-radius-pie 并在点击事件上实现point.update 以增加选定的 Z 点值。

API：https://api.highcharts.com/highcharts/series.variablepie.point.events.click

API：https://api.highcharts.com/class-reference/Highcharts.Point#update