如何在中创建Click事件

Question

假设有一个使用AmCharts的斯德哥尔摩图，如下所示：

https://codepen.io/Volabos/pen/yZwdqg

HTML代码部分如下所示：

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>       

<button type="button">Click Me!</button>

在页面的左下角，有一个Button。现在我想要一个功能，当用户单击这个按钮时，Zoom=MAX将被选中(如果还没有被选中)。

有什么方法可以实现这一功能吗？

谢谢你的指针

Answer 1

您可以通过periodSelector.selectPeriodButton()实现这一点。遗憾的是，该函数没有文档化(文档)。我对您的代码笔进行了分叉，并在末尾添加了一个函数(更新代码笔)。

document.getElementById('clickme').onclick = event => {
  const period = chart.periodSelector.periods.find(b => b.period === 'MAX');
  // if you know the index:
  // const button = chart.periodSelector.periods[3];
  chart.periodSelector.selectPeriodButton(period);
};

编辑：

根据xorspark的回答，这可能不是最好的方法。也许你想用这个代替。

Answer 2

官方支持的方法是将周期选择器periods数组中句点的periods属性设置为true (同时将其他数组设置为false)，然后调用setDefaultPeriod来模拟单击。

document.getElementById('clickme').onclick = event => {
  chart.periodSelector.periods.forEach((period) => {
    if (period.period === "MAX") {
      period.selected = true;
    }
    else {
      period.selected = false;
    }
  });
  chart.periodSelector.setDefaultPeriod();
};

科德芬