如何将 hit/click 事件添加到 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) {
  // ...
});

如何将 hit/click 事件添加到 AmCharts 4 Range？ (ValueAxisDataItem)

How to add hit/click event to AmCharts 4 Range? (ValueAxisDataItem)

events

range

click

amcharts

amcharts4