点击按钮后修改Amcharts5中Bullets的cursorOverStyle

首先先修正你代码里的语法错误，这可能是后续操作异常的隐性原因：

var pointSeries = chart.series.push(am5map.MapPointSeries.new(root, {
  latitudeField: "latitude",
  longitudeField: "longitude",
}));
pointSeries.bullets.push(function () {
  return am5.Bullet.new(root, {
    sprite: am5.Circle.new(root, {
      radius: 3,
      templateField: "bulletSettings"
    })
  });
});

var bulletTemplateClickable = am5.Template.new({
  fill: am5.color(0x000000),
  cursorOverStyle: "pointer"
});

针对你点击按钮修改cursorOverStyle无效的问题，根据你的代码场景（使用了templateField绑定模板），提供两种可行方案：

方案一：批量遍历修改所有 Bullet 的 Sprite 属性 #

直接遍历系列中的所有数据项，找到对应的 Circle Sprite 并修改属性：

// 假设按钮 ID 为 changeCursorBtn
document.getElementById("changeCursorBtn").addEventListener("click", function() {
  pointSeries.each(function(dataItem) {
    var circleSprite = dataItem.get("sprite");
    if (circleSprite) {
      circleSprite.set("cursorOverStyle", "default");
    }
  });
});

方案二：修改模板并触发属性更新通知 #

由于你使用了templateField绑定模板到数据项，直接修改模板后需要触发属性变更事件，让所有关联的 Sprite 同步更新：

document.getElementById("changeCursorBtn").addEventListener("click", function() {
  // 修改模板的 cursorOverStyle
  bulletTemplateClickable.set("cursorOverStyle", "default");
  // 触发属性变更事件，通知所有使用该模板的 Sprite 更新
  bulletTemplateClickable.events.dispatch("propertychanged", {
    key: "cursorOverStyle"
  });
});

为什么之前的尝试失败？ #

• 直接修改 Bullet 容器的属性无效：cursorOverStyle是挂载在内部的 Circle Sprite 上，而非 Bullet 本身
• 使用templateField时，模板属性变更不会自动同步，需要手动触发propertychanged事件
• 原代码中的语法错误（括号不闭合、多余参数）可能导致部分逻辑未正常初始化

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