如何在 AmCharts V4 中的 ZoomControls 上使用 zoomFactor

Question

您好，我想通过 ZoomControl 按钮使用更大的缩放系数。

这在 AmCharts (Maps) Version 4 中怎么可能？

我可以找到描述我想要的功能的旧文档：

https://docs.amcharts.com/javascriptmaps/ZoomControl (zoomFactor)

在新文档中，我只能在“组件”中找到它。

我认为可以使其工作的唯一方法是监听 zoomControl 按钮上的“hit”事件，然后确定它是正（zoomIn）还是负（zoomOut）事件并手动缩放图表，因为图表扩展了组件其中包含我正在寻找的 zoomFactor。

Answer 1

amCharts 4.0.14+： chart.zoomStep

amCharts 4.0.14+MapChart.zoomStep已经实现，这正是您要寻找的。在撰写本文时（2019 年 1 月 2 日），除变更日志外，尚未对其进行记录。

您所要做的就是：

chart.zoomStep = 3;

我们缩放到国家地图演示的默认zoomStep值为2. 这是一个叉子3：

https://codepen.io/team/amcharts/pen/d454553836da95fe2345a608e1a0efbd

amCharts <= 4.0.13：自定义“缩放系数”

如果您指的是Component.zoomFactor，则所有图表都具有此属性。即使它被称为zoomFactor，它也不是你所想的，而且它无论如何都是只读的。

不幸的是，您所描述的“缩放系数”不能被覆盖，按钮基本上，zoomIn()并且zoomOut()在这些方法中，缩放系数为 2 是硬编码的。监听"hit"事件是行不通的，因为您会遇到相互竞争的缩放事件。如果您禁用了原始"hit"事件并创建了自己的事件，则出于可访问性目的，键盘仍有额外的帮助程序逻辑，因此您的自定义事件和这些帮助程序将具有不一致的缩放系数。那么，什么可以做的是杀死默认plusButton和minusButton和滚动您自己。

要禁用它们，只需将它们的.disabled属性设置为true：

chart.zoomControl.plusButton.disabled = true;
chart.zoomControl.minusButton.disabled = true;

然后我们将把我们自己的按钮版本也作为ZoomControl容器的子项，并将它们放在它之前/之后slider以模拟原始按钮：

var plusButton = chart.zoomControl.createChild(am4core.Button);
plusButton.shouldClone = false;
plusButton.label.text = "+";
plusButton.width = am4core.percent(100);
plusButton.padding(5, 5, 5, 5);
plusButton.marginBottom = 2;
plusButton.insertBefore(chart.zoomControl.slider);

var minusButton = chart.zoomControl.createChild(am4core.Button);
minusButton.shouldClone = false;
minusButton.label.text = "-";
minusButton.width = am4core.percent(100);
minusButton.padding(5, 5, 5, 5);
minusButton.marginTop = 1;
minusButton.insertAfter(chart.zoomControl.slider);

然后，我们将"hit"在按钮上提供使用我们自己的缩放因子放大/缩小的事件（customZoomFactor如下）：

var customZoomFactor = 3; // default: 2

plusButton.events.on("hit", function() {
  chart.zoomToGeoPoint(
    chart.zoomGeoPoint,
    chart.zoomLevel * customZoomFactor,
    false
  );
});
minusButton.events.on("hit", function() {
  chart.zoomToGeoPoint(
    chart.zoomGeoPoint,
    chart.zoomLevel / customZoomFactor,
    false
  );
});

这是我们的Zooming to Country Map 演示的一个分支，其中包含了上述所有代码：

https://codepen.io/team/amcharts/pen/f358095c9ea00d875049b67a7bd13df4