AnyChart.js 树形图(Treemap)自定义着色与字体大小适配问题

核心问题修复说明 #

• fill回调获取自定义points字段：调用this.getData()即可拿到当前节点的全部自定义属性
• 色系梯度配置：区分正负值区间，绝对值越大颜色越深，正值对应绿色系、负值对应红色系
• 动态字体大小：通过标签格式化回调获取当前块的像素尺寸，按块的大小动态计算字体大小
• 配置顺序修正：所有样式规则配置完成后再执行draw()方法，避免配置不生效

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/v8/js/anychart-treemap.min.js"></script>
    <title>PSX TREE MAP</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        anychart.onDocumentReady(function () {
            var chart = anychart.treeMap(getData(), "as-tree");
            chart.maxDepth(2);
            chart.hintDepth(1);
            chart.hintOpacity(0.7);

            // 动态调整标签字体大小
            chart.labels().useHtml(true);
            chart.labels().format(function () {
                const bounds = this.getPixelBounds();
                // 按块的最小边长计算字体大小，范围12px-28px可自行调整
                const baseSize = Math.min(bounds.width, bounds.height);
                const fontSize = Math.max(12, Math.min(28, Math.floor(baseSize / 6)));
                return `<span style="font-weight:bold; color: #fff; font-size: ${fontSize}px">${this.getData('name')}</span><br><span style="font-size: ${fontSize - 4}px">${this.getData('points')}</span>`;
            });

            chart.tooltip().useHtml(true);
            chart.tooltip().format(
                "COMPANY : {%name}<br>PERCENTAGE CHANGE: {%points}%<br>MARKET CAP: {%value}<br>"
            );

            // 按points配置填充色
            chart.fill(coloringFunction);
            function coloringFunction() {
                const points = this.getData('points');
                // 颜色梯度可自行调整
                if (points < 0) {
                    // 负值红色系，绝对值越大颜色越深
                    const opacity = Math.min(1, Math.abs(points) / 5);
                    return `rgba(220, 53, 69, ${opacity})`;
                } else {
                    // 正值绿色系，数值越大颜色越深
                    const opacity = Math.min(1, points / 5);
                    return `rgba(40, 167, 69, ${opacity})`;
                }
            }

            chart.container("container");
            // 所有配置完成后再执行绘制
            chart.draw();
        });

        // 数据源
        function getData() {
            var data = [
                {
                    name: "PAKISTAN STOCK EXCHANGE",
                    children: [
                        {
                            name: "TECH ",
                            children: [
                                {
                                    name: "HUMNL",
                                    value: 24,
                                    points: 0.26
                                },
                                {
                                    name: "TRG",
                                    value: 6,
                                    points: 2.3
                                },
                                {
                                    name: "SYS",
                                    value: 55,
                                    points: 4.26
                                }
                            ]
                        },
                        {
                            name: "SUGAR & ALLIED INDUSTRIES ",
                            children: [
                                {
                                    name: "AGSML",
                                    value: 12,
                                    points: 2.26
                                },
                                {
                                    name: "MIRKS",
                                    value: 14,
                                    points: 3.26
                                },
                                {
                                    name: "ALNRS",
                                    value: 15,
                                    points: -0.26
                                }
                            ]
                        },
                    ]
                }
            ];
            return data;
        }
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者F Nasir