我正在处理 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
标签??
最佳答案
通常,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 .
关于javascript - amCharts 中标签的点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38758751/