如何在 amCharts 地图 (v4) 中的缩放控件上设置不同的颜色

Question

通过设置 fill 属性，我们可以设置缩放控件的背景颜色属性，但是 按钮文本颜色 不是我们可以设置的属性。

chart.zoomControl.plusButton.background.cornerRadius(5, 5, 5, 5);
chart.zoomControl.plusButton.background.fill = '#014888';
chart.zoomControl.plusButton.background.states.getKey('hover').properties.fill = '#27aad6';

有选择设置吗？

Answer 1

我是这样设置的：

chart.zoomControl.plusButton.label.fill = '#ffffff';
chart.zoomControl.minusButton.label.fill = '#ffffff';

Answer 2

如果您使用 am 图表 5，您可以像这样简单地实现此目的

获取新var中的实例，然后设置所有自定义属性

const zoomControl = map.set("zoomControl", am5map.ZoomControl.new(root, {
          dy: -284,
          dx: -39,
        }));
        // map.zoomControl.plusButton.label.fill = '#ffffff';

        zoomControl.minusButton.setAll({
          stroke: am5.color(0xfff)
        });
        zoomControl.plusButton.setAll({
          stroke: am5.color(0xfff)
        });
        
        zoomControl.minusButton.get("background").setAll({
          fill: am5.color(0x262626),
          fillOpacity: 0.7,
          stroke: am5.color(0x111111),
          strokeWidth: 2,
          strokeOpacity: 0.3,
        });
        zoomControl.minusButton.get('background').states.create('hover', {}).setAll({
          fill: am5.color(0x000000),
          fillOpacity: 1,
        });
        
        zoomControl.minusButton.get('background').states.create('down', {}).setAll({
          fill: am5.color(0x666666),
          fillOpacity: 1,
        });        
        

        zoomControl.plusButton.get("background").setAll({
          fill: am5.color(0x262626),
          fillOpacity: 0.7,
          stroke: am5.color(0x111111),
          strokeWidth: 2,
          strokeOpacity: 0.3,
        });

        zoomControl.plusButton.get('background').states.create('hover', {}).setAll({
          fill: am5.color(0x000000),
          fillOpacity: 1,
        });
        
        zoomControl.plusButton.get('background').states.create('down', {}).setAll({
          fill: am5.color(0x666666),
          fillOpacity: 1,
        }); 

Answer 3

chart.set("zoomControl", am5map.ZoomControl.new(root, {
     background: am5.Rectangle.new(root, {
         // fill: am5.color(0xeb354e),               
         fillOpacity: 0.9,
         strokeOpacity:0
     })
}));