javascript - 如何自定义 Highcharts TreeMap 数据标签？

Question

这是我的树状图。我有 3 个级别，我想像提供的图片一样自定义标签。

更具体地说，我想要:

1. 在第一层我想把第一层标签放在顶部的主框中，第二层应该隐藏在这里。

2. 在第二层向下钻取后，我想再次将标签从主框中取出。

3. 在所有级别，我想查看标签中最后级别的详细信息，如示例图片所示。

4. 有没有一种方法可以有 3 个级别，但只向下钻取到 2 个级别？

5. 您知道为什么向下钻取后颜色会发生变化吗？第一层和第三层的颜色不一样!

非常感谢您的考虑。

.

Answer 1

正如@WojciechChmiel 在评论中提到的色差问题的解决方案是将父颜色设置为透明!

为了在部分框外添加标签，我使用了数据标签格式函数。在 react 中，renderToString 帮助我将 React 组件作为关卡标题传递。

我还可以通过以下方式识别每个标签的级别:

  const { level } = data.point.node;

有了这个，我可以管理要显示的理想标签!

-运行下面提供的演示!