在amCharts中单击标签事件

Question

我正在制作amCharts圆环图。

以下是创建图表的脚本。

JS

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "pullOutDuration":0.5,
 "pullOutRadius": "5",
 "theme": "light",
 "dataProvider": [ {
   "title": "Aaa",
   "value": 10,
 }, {
   "title": "Bbb",
   "value": 10,
 },{
   "title":"Ccc",
   "value":10,
 },{
   "title":"Ddd",
   "value":10,
 },{
   "title":"Eee",
   "value":10,
 }],
 "titleField": "title",
 "valueField": "value",
 "labelRadius": 50,

 "radius": "35%",
 "innerRadius": "85%",
 "labelText": "[[title]]",
 "export": {
   "enabled": true
 },
 "baseColor":"#7a4436",
 "pullOutOnlyOne":true,
 "startEffect":"easeOutSine",
 "pullOutEffect":"easeOutSine",
 "showBalloon":false,
 "listeners": [{
     "event": "clickSlice",
     "method": function(e) {
          var dp = e.dataItem.dataContext;
          alert(dp.title + ':'+dp.value)

          e.chart.validateData();
     }
   }]
});

我能够为图表的每个切片提供click事件监听器。

但是 我想为每个切片的标签添加一个click事件 。所以在我的示例中点击了标签Aaa，Bbb等等的事件。

修改

或如何为这些标签提供anchor标签？

Here is the working fiddle demo

Answer 1

通常，clickSlice的听众只会附加到标签的wedge和小tick，而不附加到标签本身。

您可以使用以下代码片段手动执行此操作：

chart.addListener("init", function() {
    var d = chart.chartData;
    for (var i = 0; i < d.length; i++) {
        d[i].label.node.style.pointerEvents = "auto";
        chart.addEventListeners(d[i].labelSet, d[i]);
    }
});

由于标签自动将pointer-events样式分配给none，您必须将其更改回来，以便可以注册鼠标事件。然后，您可以使用图表提供的方法手动将侦听器添加到svg元素。

初始化图表后，您必须执行此操作。但是，如果您希望在处理程序中保留e.chart.validateData()调用，则必须侦听其他事件（例如drawn）。

如果e.chart.validateData()的目的是阻止切片被撤出，更好的方法是使用pullOutRadius: 0

这里是demo。

Answer 2

更新了v4的简单答案：

const yAxisLabel = mySeries.bullets.push(new am4charts.LabelBullet());
yAxisLabel.label.interactionsEnabled = false;