如何将点击事件添加到AmCharts 4 Range？ （ValueAxisDataItem）

Question

我正在尝试将点击事件添加到与此类似的图形范围内

https://codepen.io/ChazUK/pen/VwjqWNJ?editable=true

for (let grading of data.gradingData) {
    var range = axis2.axisRanges.create();
    range.axisFill.fill = am4core.color(grading.color);
    range.axisFill.fillOpacity = 0.8;
    range.axisFill.zIndex = -1;
    range.value = grading.lowScore > chartMin ? grading.lowScore : chartMin;
    range.endValue = grading.highScore < chartMax ? grading.highScore : chartMax;
    range.grid.strokeOpacity = 0;
    range.stroke = am4core.color(grading.color).lighten(-0.1);
    range.label.inside = true;
    range.label.text = grading.title.toUpperCase();
    range.label.inside = true;
    range.label.location = 0.5;
    range.label.inside = true;
    range.label.radius = am4core.percent(10);
    range.label.paddingBottom = -5; // ~half font size
    range.label.fontSize = "0.9em";
}

这个想法是，用户可以单击范围并更改手的值以指向该范围。

我已经看到轴标签是可单击的，但是找不到范围或类似范围内的任何事件。

Answer 1

您需要在范围的axisFill对象上启用交互，因为默认情况下该对象处于禁用状态。完成此操作后，您可以在其上监听hit事件：

range.axisFill.interactionsEnabled = true; //required so that the hit event will trigger
range.axisFill.events.on('hit', function(ev) {
  // ...
});