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

时间:2016-01-09 04:15:12

标签: javascript pie-chart chartist.js

我知道如何使用chartist js来实现这一效果 当鼠标进入时,标签会显示出来 Picture form chart js
我遇到了两个问题:
1.我知道如何添加事件监听器。数据类型' slice'仅包含中心位置 数据类型'标签'包含我想要的位置,但我不希望标签显示,所以我设置showLabel:false 2.我试图附加html并设置z-index,x position,y position但是没有工作 我该怎么办?

=====================(更新当前结果)===================== =======
这个项目是为了商业,所以我标出了标题 Picture form chart js
目前我不知道该怎么做。 这是我的代码:

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(){
            });
        }
    });

1 个答案:

答案 0 :(得分:2)

首先感谢使用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');
});