如何在 AmCharts-StockChart 中创建点击事件

Question

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

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). I forked your code pen and extended it with a function at the end (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 的 periods 数组中的 selected 属性设置为 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

如何在 AmCharts-StockChart 中创建点击事件

How to create a Click event in AmChart-StockChart

javascript

amcharts