gpt4 book ai didi

javascript - 悬停/鼠标悬停在元素内部的每一次移动中都没有激活

转载 作者:行者123 更新时间:2023-11-29 21:38:46 30 4
gpt4 key购买 nike

我正在使用 Chartjs v.1.0.2 并尝试将点设置为仅在悬停在当前点上时出现。同样的问题是当我使用悬停或鼠标悬停时。可以使用 getPointsAtEvent(e); 找到当前点,但它仅在我将鼠标移出 Canvas 然后将其返回时才起作用,而不是在我移入 Canvas 时起作用。每次我在 Canvas 元素内移动鼠标时,它如何工作?

window.onload = function(){

var ctx = $("#chart1").get(0).getContext("2d");
var chart1 = new Chart(ctx).Line(data1, options);


$("#chart1").hover(function(e) {
var activeBars = chart1.getPointsAtEvent(e);
activeBars[0].display = true;
// console.log(activeBars[0]);
chart1.update();
});

};

var data1 = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(95,186,88,0.7)",
strokeColor: "rgba(95,186,88,1)",
pointColor: "rgba(95,186,88,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};



var options = {
responsive: true,
bezierCurve : false,
scaleShowLabels: false,
scaleFontSize: 0,
pointDot : false,
scaleBeginAtZero: true,
scaleShowHorizontalLines: false,
scaleShowVerticalLines: true,
scaleGridLineColor : "rgba(232,232,232)",
showTooltips: true,

customTooltips: function (tooltip) {
var tooltipEl = $('#chartjs-tooltip');

if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}

tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);

// split out the label and value and make your own tooltip here
var parts = tooltip.text.split(":");
var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
tooltipEl.html(innerHtml);

tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
}

};

简化fiddle

最佳答案

pointDot 选项设置为 true。

...
pointDot : true,
...

然后将系列的 pointColorpointStrokeColor 设置为透明,将 pointHighlightFillpointHighlightStroke 设置为非透明透明值,像这样

...
pointColor: "rgba(0,0,0,0)",
pointStrokeColor: "rgba(0,0,0,0)",
pointHighlightFill: "rgba(95,186,88,1)",
pointHighlightStroke: "rgba(95,186,88,1)",
...

fiddle - http://jsfiddle.net/p1zgp5ys/

关于javascript - 悬停/鼠标悬停在元素内部的每一次移动中都没有激活,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33924048/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com