javascript - Javascript-如何通过 Chartist js 在饼图上制作叠加标签

Question

我想知道如何使用 chartist js 来实现这种效果。
当鼠标进入时，标签就会出现。 我遇到了两个问题： 1.我知道如何添加事件监听器。数据类型“切片”只包含中心位置。 数据类型“标签”包含我想要的位置，但我不想显示标签，所以我设置了 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(){
            });
        }
    });

Answer 1

首先感谢您使用 Chartist :-)

如果您使用事件委托，您可以添加一个侦听器来统治所有事件。然后您也不需要使用该draw事件，因为即使子节点将被更新/重新创建，侦听器也是有效的。

只需添加这段代码即可使用委托捕获所有 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');
});