如何在AmChart-StockChart中创建Click事件

Question

假设有一个使用AmCharts的Stockchart如下：

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()实现这一目标。可悲的是，这个功能没有记录（docs）。我分叉你的代码笔并在最后用一个函数扩展它（updated code pen）。

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

官方支持的方法是将periodSelector的selected数组中的句点的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();
};

Codepen