如何设置AnyChart旭日图弧段按正负值变色且不隐藏负值切片

核心问题说明 #

1. 负值切片隐藏：AnyChart旭日图默认直接过滤数值小于等于0的节点，不会为其分配弧段空间
2. 动态配色需求：需要根据节点原始value的正负值分别设置绿色、红色填充

修改后完整代码 #

<style>
html,
body,
#container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #33573D;
}
</style>

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-sunburst.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.min.js"></script>

<div id="container"></div>

<script>
const file2 = [
    {
        "name": "KES100",
        "fill": "#33573D",
        "children": [
            {
                "name": "TEXTILE",
                "id": "textileId",
                "children": [
                    {
                        "continent": "textileId",
                        "name": "COST",
                        "value": "10",
                        "points": "30"
                    },
                    {
                        "continent": "textileId",
                        "name": "COOT",
                        "value": "-10",
                        "points": "30"
                    },
                    {
                        "continent": "textileId",
                        "name": "AHTM",
                        "value": "10",
                        "points": "30"
                    }
                ]
            },
            {
                "name": "OIL",
                "id": "oilId",
                "children": [
                    {
                        "continent": "oilId",
                        "name": "PSO",
                        "value": "-20"
                    },
                    {
                        "continent": "oilId",
                        "name": "BYCO",
                        "value": "20"
                    },
                    {
                        "continent": "oilId",
                        "name": "MPCL",
                        "value": "10"
                    }
                ]
            }
        ]
    }
]

// 数据预处理：添加绝对值字段用于弧长计算
function preprocessData(node) {
    if (node.value) {
        node.absValue = Math.abs(Number(node.value));
    }
    if (node.children && node.children.length) {
        node.children.forEach(child => preprocessData(child));
    }
}
file2.forEach(node => preprocessData(node));

anychart.onDocumentReady(function () {
    // 直接使用预处理后的本地数据，不需要加载json文件
    var chart = anychart.sunburst(file2, "as-tree");

    chart.calculationMode("parent-independent");
    // 指定用absValue字段计算弧段大小，避免负值被过滤
    chart.points('absValue');

    // 动态设置填充色：正值绿色，负值红色
    chart.fill(function (point) {
        const value = Number(point.get('value'));
        return value >= 0 ? '#2ecc71' : '#e74c3c';
    });

    chart.labels().format('{%Name}\n{%Value}');
    chart.tooltip().format('{%Name}:{%Value}');

    chart.container("container");
    chart.draw();
});
</script>

关键修改点说明 #

• 数据预处理阶段新增absValue字段，存储原始value的绝对值，作为弧段大小的计算依据，从根源避免负值节点被过滤
• 调用chart.points('absValue')显式指定旭日图使用自定义的绝对值字段计算弧段占比
• 通过chart.fill()的回调函数读取节点原始value值，判断正负后返回对应的填充色，实现需求的配色规则
• 修正原代码中同时定义本地数据又调用远程json文件加载的逻辑冲突，直接使用预处理后的本地数据渲染

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