AmChart桑基图节点值求和问题:中间节点数值重复/末节点数值为0
AmChart桑基图节点总和显示问题解决方法
在桑基图中直接使用内置的{sum}会导致中间节点数值重复(因为sum是流入+流出的总和,中间节点的流入流出会被重复计算);而{sumOutgoing}会让最后一个无流出的节点显示0,可通过以下两种方式解决:
方法一:用textFunction动态判断节点类型
利用节点的链接数量区分起始、中间、结束节点,分别调用对应的流量字段:
series.nodes.labels.template.setAll({ textFunction: function(node) { // 起始节点:无流入链接,取流出总和 if (node.incomingLinks.length === 0) { return `[bold]${node.name}[/] (₹${node.sumOutgoing})`; } // 结束节点:无流出链接,取流入总和 else if (node.outgoingLinks.length === 0) { return `[bold]${node.name}[/] (₹${node.sumIncoming})`; } // 中间节点:流入=流出,取任意一个即可 else { return `[bold]${node.name}[/] (₹${node.sumIncoming})`; } } });
方法二:提前计算自定义节点总数值
在数据加载完成后,遍历节点并添加自定义总数值字段,后续直接引用该字段:
// 遍历所有节点,计算并添加totalValue属性 series.nodes.each(function(node) { // 优先取流入值,无流入则取流出值 let total = node.sumIncoming || node.sumOutgoing; node.data.totalValue = total; }); // 设置标签模板 series.nodes.labels.template.setAll({ text: "[bold]{name}[/] (₹{totalValue})" });
两种方法都能确保所有节点显示正确的单一总流量数值,避免重复或0值问题。
内容的提问来源于stack exchange,提问作者Satya Machari
相关产品推荐
相关产品推荐

