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();
     }
   }]
});

我可以为图表的每个切片提供点击事件侦听器。

但是我想为每个切片的标签添加一个点击事件。因此，在我的示例中，标签 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;

amCharts 中标签的点击事件

Click event for label in amCharts

javascript

amcharts