javascript - 如何在 AmCharts V4 的 ZoomControls 上使用 zoomFactor

Question

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

在 AmCharts( map )版本 4 中这怎么可能？

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

https://docs.amcharts.com/javascriptmaps/ZoomControl (缩放因子)

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

我认为我可以让它工作的唯一方法是监听 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;

我们的 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);

然后我们将在使用我们自己的缩放因子(下面的customZoomFactor)放大/缩小的按钮上提供“hit”事件:

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 的 fork 包含以上所有代码:

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