Question

假设有一个使用AmCharts的股票图表，如下所示：

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的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

Answer 2

您可以使用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的回答，这可能不是最佳方法。也许您想使用它。

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

2 个答案: