使用图像时 C3js Tooltip 闪烁

问题描述

我在下面使用 c3js 是我使用 c3 实现工具提示的地方

    tooltip: {
                horizontal: false,show: true,contents: _data.tooltipContents,position: function (data,width,height,element) {
                    //get bar - a bit tricky but it works...
                    var bar = d3.select(element.classList[1].replace("c3-event-rect",".c3-bar"));
                    var elem = bar[0][0].getBBox();
                    return { top: 15,left: elem.x + (elem.width / 2) + 100 - (width/2)};
                },format: {
                    value: function (value,id) {

                        return formatCurrencyTooltip(value);
                    }
                }
            },

_data.tooltipContents 来自这里的这个方法...

    vm.tooltipContents =
                

    function (d,defaultTitleFormat,defaultValueFormat,color) {
                        //  return "test";
                        var $$ = this,text,i;
    
                        for (i = 0; i < d.length; i++) {
                            if (!(d[i] && (d[i].value || d[i].value === 0))) {
                                continue;
                            }
    
                            if (!text)
                                text = "<table class='" + $$.CLASS.tooltip + "'>";
    
                            var catLabel = vm.categories[d[0].index];
                            var stList = vm.tooltipArray.filter(function (st) {
                                return st.metricCat === catLabel;
                            });
                            for (s = 0; s < stList.length; s++) {
                                var stName = stList[s].name.length > 30 ? stList[s].name.substring(0,30) + '...' : stList[s].name;
                                var valueFormatted = formatCurrencyTooltip(stList[s].amount.toFixed(0));
    
                                text += "<tr rowspan=2 class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
                                text += "<td class='value' style='border: none'>" + "<img src='" + stList[s].imagePath +
                                    "' style='display: inline-block; height: 20px; margin-left: -6px' />" + "</td>";
    
                                text += "<td class='name' style='border: none'>" + stName + "</td>";
                                text += "<td class='name' style='border: none'>" + valueFormatted + "</td>";
                                text += "</tr>";
                            }
                        }
                        return text + "</table>";
                    };

当我们越过图表上的条形图时，工具提示会出现，但当我们在条形图上移动时，图像会随着我们移动而闪烁，因为工具提示会一遍又一遍地调用此函数。我们怎样才能防止这种情况发生？只能说是图片，文字不闪烁。

我在网上查看并尝试将指针事件设置为无。

element.style {
    position: absolute;
    pointer-events: none;
    display: none;
    top: 15px;
    left: 437.5px;
}

这是 c3-tooltip-container 的样式

任何建议都会很棒！

编辑** 因此，似乎 c3js 应用于图表的 mousemove 事件侦听器会导致每次鼠标移动时调用该函数。有没有办法让工具提示将它分配给悬停，以便它只调用一次？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

c3.js javascript