AmCharts，捕获期间选择器的点击事件

Question

我正在使用 AmCharts 3，我想知道有没有一种方法可以捕获点击周期选择器按钮的事件？

The Docs 状态我可以向 'changed' 类型的周期选择器添加一个侦听器，但事件几乎随时运行

'zoomed' 有一个侦听器，但无论我是否单击周期选择器，它都会在我每次缩放图表时运行

这是我的尝试：

chart = AmCharts.makeChart(scope.vm.chartId, chartSettings);
    AmCharts.addInitHandler(function () {
    // add events to item
    _.each(chart.panels, function (item) {
    //item.addListener("zoomed", onZoomed);
    item.addListener("changed", function(e) {
    console.debug("changed " + e.periodString);
   });
 });
});

Answer 1

由于您是通过配置对象启动的，我建议您使用最新版本的 AmCharts 支持的新 'listeners' 属性将事件处理程序添加到 chartSettings 对象上的 periodSelector 对象.它应该有效。

Answer 2

您可以为此使用句点选择器的 changed 事件。

即：

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "stock",

  // ...

  "periodSelector": {
    "position": "left",
    "periods": [ {
      "period": "MM",
      "selected": true,
      "count": 1,
      "label": "1 month"
    }, {
      "period": "YYYY",
      "count": 1,
      "label": "1 year"
    }, {
      "period": "YTD",
      "label": "YTD"
    }, {
      "period": "MAX",
      "label": "MAX"
    } ],
    "listeners": [ {
      "event": "changed",
      "method": function( event ) {
        if ( event.predefinedPeriod !== undefined ) {
          console.log( event.predefinedPeriod, event.count );
        }
      }
    } ]
  },

  // ...
} );

请注意，使用日期输入字段更改日期时也会执行此事件，因此会检查是否定义了 event.predefinedPeriod。

另请记住，在图表初始化时也选择了默认周期。因此，当图表首次加载而没有任何用户交互时，将触发此事件。

这是 working demo.

AmCharts，捕获期间选择器的点击事件

AmCharts, capturing click event for period selector

javascript

amcharts