如何解决使用图像时 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 举报,一经查实,本站将立刻删除。