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

Question

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

在AmCharts（地图）第4版中怎么可能？

我可以找到描述所需功能的旧文档：

https://docs.amcharts.com/javascriptmaps/ZoomControl（zoomFactor）

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

我认为我可以使其起作用的唯一方法是侦听zoomControl Button上的“ hit”事件，然后确定它是正事件（zoomIn）还是负事件（zoomOut），并手动缩放Chart，因为Chart扩展包含要查找的zoomFactor的Component。

Answer 1

amCharts 4.0.14+：chart.zoomStep

使用amCharts 4.0.14+，已经实现了MapChart.zoomStep，这正是您所需要的。截至撰写本文时（2019年1月2日），除变更日志中外，尚未记录在案。

所有您需要做的是：

chart.zoomStep = 3;

我们的Zooming to Countries Map demo's默认zoomStep为2。这是3所在的叉子：

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

---

amCharts <= 4.0.13：自定义“缩放因子”

如果您指的是Component.zoomFactor，那么请参考all charts have this property。即使它被称为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 Countries Map demo的分支，其中包含上述所有代码：

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