优化Highcharts中饼图的大小

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

选择饼图后，它应按如下方式展开：

到目前为止，我所取得的成就如下所示，这显然与设计的精神相去甚远。我不确定要拉什么杠杆才能尽可能接近要求。请看我的代码沙盒

高层次的要求是：

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

我有一些问题：

如何减少“记号”的大小，从而避免类别标签上的省略号。或者有没有一种方法可以包装类别标签以避免省略号

如何为每个支出类别添加数据值

如何增加中间值？

如何控制每个元素的字体大小

选择后如何生长饼图

如何抑制悬停时的动画

到目前为止，我的实现是成功的

更新

在进一步研究并纳入@Sebastian Wędzel建议的变更后，我已经能够将实施提升到以下水平：

---

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

• 图表大小：320 x 320 px-您可以定义

  图表宽度

  和

  图表高度

API:

• 如何在中间添加总值？

可以使用SvgRender工具将其渲染为自定义文本

演示：

API:

• 选择后如何生长饼图

在这里，您可能需要将序列类型更改为

variablepie

-demo:，并在单击事件上执行

点。更新

，以增加所选点的Z值

API:

---

API:

请参阅此文档-谢谢@roa。在参考了这些文档之后，我终于想出了如何把馅饼做大的办法。然而，我无法找出其余的答案。这些文件很大，我仍在绞尽脑汁。我已经更新了我的问题列表以及代码沙盒。任何进一步的帮助都将不胜感激。谢谢你的帮助，@Sebastian。是的，我通过深入研究文档回答了几个问题。给您几个问题：1）使用

chart.width

和

chart.height

与我的方法相比，是否有优势，即将包含的div设置为该大小，然后设置

containerProps={{{style:{width:'100%'，height:'100%}

？2） 为了在select上增加饼图，我目前刚刚设置了

allowPointSelect

。行为不符合设计，我会看看设计师是否同意。否则，我会根据你的例子来执行你的建议。将示例转换为基于React的代码（使用

useRef

和

useffect

）有点棘手，但我最终还是成功了。我看到的唯一问题是，总值稍微偏左。有什么我遗漏的吗？事实上，我现在也可以在你的例子中重现。您可以将数字从88改为100，或将标签改为较短的字符，如“$”，您将看到未对齐的情况。@Naresh很抱歉回复晚了！1） 使用

图表.宽度/高度

没有什么特别的好处。默认情况下，它将从您的容器div计算，更多信息：2）如果要将此标签居中，您可以执行与字幕相同的翻译：