Highcharts 树状图

Question

我目前正在使用 highcharts 构建树形图。我有几个类别，每个类别都有一个数值，表示它里面有多少程序。我想要做的是有一个“方形”风格的树形图，每个类别都有一个框。

我遇到的问题是处理 highcharts 的字体大小非常糟糕。我希望文本对于较大的盒子来说是大的，对于较小的盒子来说是小的。我似乎无法弄清楚。

我尝试将字体大小缩放到该值，但有时较大值的框非常薄，因此会分崩离析。

我可以访问框的尺寸，并且可以为图表提供数据标签格式化程序功能。所以我尝试将文本以一定大小渲染到画布上，看看它是否在边界内或太小，然后从那里调整 1 个像素，但它仍然不起作用。我实际上不知道为什么这个失败了，但是我弄乱了它一段时间但没有成功。

我已经阅读了文档并在线搜索了其他答案，但之前似乎没有人这样做过。任何帮助表示赞赏。谢谢

Answer 1

您可以对数据标签使用格式化功能，并根据点值设置字体大小。

    series: [{
        ...,
        levels: [{
            ...
        }, {
            level: 2,
            dataLabels: {
                formatter: function() {
                    return '<span style="font-size:' + (10 + this.point.value) + 'px">' + this.key + '</span>'
                }
            }
        }],
        ...
    }]

---

现场演示： https://jsfiddle.net/BlackLabel/8e7b6ak0/

API 参考： https://api.highcharts.com/highcharts/series.treemap.levels.dataLabels.formatter