You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何修改力导向网络图中节点外圆圈的颜色

解决amCharts5力导向图节点外圆圈颜色问题

方法一:通过数据直接设置外圆圈颜色

你可以在每个节点的nodeSettings中添加stroke属性,直接指定外圆圈的颜色,和设置填充色的方式一致:

var data = {
  name: "Root",
  value: 0,
  children: [
    {
      name: "1",
      value: 40,
      nodeSettings: {
        fill: am5.color(0xFF69B4),
        stroke: am5.color(0xFF69B4), // 设置外圆圈颜色
        strokeWidth: 2 // 可选:调整外圆圈粗细
      }
    },
    // 其他节点同理配置
  ]
};

方法二:让外圆圈颜色自动匹配填充色

如果希望所有节点的外圆圈颜色和填充色自动保持一致,无需逐个设置,可以通过节点模板的适配器实现:

// 获取力导向图系列
var series = chart.series.push(
  am5flow.ForceDirected.new(root, {
    valueField: "value",
    categoryField: "name",
    childDataField: "children"
  })
);

// 添加适配器,同步stroke与fill颜色
series.nodes.template.adapters.add("stroke", function(stroke, target) {
  return target.get("fill") || stroke;
});

// 可选:设置默认外圆圈粗细
series.nodes.template.setAll({
  strokeWidth: 2
});

这样不管是通过nodeSettings设置单个节点填充色,还是通过模板设置全局填充色,外圆圈颜色都会自动同步。

关于定位元素失败的说明

amCharts5的力导向图节点默认是Circle元素,外圆圈对应的就是该元素的stroke属性,不需要额外定位子元素,直接通过节点模板或nodeSettings修改stroke即可。

内容的提问来源于stack exchange,提问作者Greg

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.23 02:28:17