javascript - 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 .