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

Question

我想知道怎么用chartist js做这个效果。
当鼠标进入时，标签出现

我遇到了两个问题：
1.I 知道如何添加事件 listener.The 数据类型 'slice' 只包含中心位置。
数据类型 'label' 包含我想要的位置但我不想显示标签所以我设置 showLabel:false.
2.I 尝试附加 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 事件，因为即使子节点将被更新，侦听器也将有效/ re-created.

只需添加这段代码即可使用委托捕获所有 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-How 通过 Chartist js 在饼图上制作叠加标签

Javascript-How to make overlay tag on the pie chart by Chartist js

javascript

pie-chart

chartist.js