我想知道如何使用chartist js来实现这种效果。
当鼠标进入时,标签就会出现。
我遇到两个问题:
1.我知道如何添加事件监听器。数据类型“slice”仅包含中心位置。
数据类型“标签”包含我想要的位置,但我不希望标签显示,所以我设置了 showLabel:false。
2.我尝试附加html并设置z-index、x位置、y位置但没有成功。
我该怎么办?
======================(更新当前结果)===================== =======
这个项目是商业项目,所以我把标题标出来了。
目前我不知道该怎么办。
这是我的代码:
new Chartist.Pie('#pieAppUsageChart', AppUsagePiedata, {
height: 300,
showLabel: false
}).on('draw', function(data){
if(data.type === 'slice'){
console.log(data);
$('#pieAppUsageChart').find("."+data.series.className).on('mouseenter',function(){
}).on('mouseleave',function(){
});
}
});
最佳答案
首先感谢您使用 Chartist :-)
如果您使用事件委托(delegate),您可以添加一个监听器来统治所有事件。然后,您也不需要使用 draw
事件,因为即使更新/重新创建子节点,监听器也将有效。
只需添加这段代码即可使用委托(delegate)捕获所有 mouseenter/mouseleave 事件:
$('#your-chart').on('mouseenter', '.ct-slice-pie', function() {
var $slice = $(this);
// Code for showing tooltip, you can use any tooltip library like tooltipster
// You can get meta data from your slices using $slice.getAttribute('ct:meta');
});
关于Javascript-如何通过Chartist js在饼图上制作覆盖标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34689590/