如何修改AmCharts5中primaryButton（缩放退出按钮）的颜色？

你的代码里，Label和LineSeries的样式生效，但ZoomOut按钮仅在点击时显示目标绿色，常态仍为蓝色，这是因为你没有正确定位按钮的常态样式元素——AmCharts5的按钮样式由内部组件（背景、图标）和状态机制控制，直接设置minus属性无法覆盖默认常态样式。

以下是两种可行的解决方法：

方法1：通过主题规则精准配置 #

可以针对按钮的背景和图标设置样式，或直接指定ZoomOutButton类型避免影响其他按钮：

var fpTheme = am5.Theme.new(root);

// 保留你已有的Label、LineSeries规则...

// 方案A：修改所有Button的常态样式
fpTheme.rule("Button").setAll({
  background: {
    fill: am5.color(0x4ac445) // 设置按钮常态背景色
  },
  icon: {
    fill: am5.color(0xffffff) // 设置按钮图标（减号）的颜色
  }
});

// 方案B：仅修改ZoomOutButton（更精准）
fpTheme.rule("ZoomOutButton").setAll({
  background: {
    fill: am5.color(0x4ac445)
  },
  icon: {
    fill: am5.color(0xffffff)
  }
});

// 若需修改悬停/激活状态，可添加对应规则：
fpTheme.rule("ZoomOutButton", ["hover"]).setAll({
  background: {
    fill: am5.color(0x3ba036) // 悬停时的背景色
  }
});

方法2：直接获取按钮实例修改 #

如果能拿到图表的ZoomOut按钮引用，可直接修改其组件样式：

// 假设你已创建了XY图表实例xyChart
var zoomOutBtn = xyChart.zoomOutButton;
if (zoomOutBtn) {
  // 设置常态背景色
  zoomOutBtn.get("background").set("fill", am5.color(0x4ac445));
  // 设置图标颜色
  zoomOutBtn.get("icon").set("fill", am5.color(0xffffff));
}

关键提示 #

• 按钮的active状态（点击时）样式默认会继承主题的高亮色，所以你之前的设置会在点击时生效，但常态需要单独配置背景和图标。
• 使用ZoomOutButton规则而非通用Button，可以避免修改图表中其他按钮的样式。

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