Я использую Chart JS, чтобы отображать div во всплывающих подсказках при наведении, но при удалении Наведите всплывающие подсказки, которые он делает, t go в их предыдущее состояние. Возможно ли это в таблице JS. Я пробовал этот код изменить onHover, но как вернуться в нормальное положение.
Есть ли какое-либо событие, которое я пропустил в документации, или какое-либо событие, которое поможет с этим.
var data = {
labels: ['heading1', 'heading2', 'heading3','heading4'],
datasets: [{
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [20, 49, 60, 81],
}]
};
var option = {
legend: false,
title: {
display: true,
},
onHover: function(evt) {
var item = myLineChart.getElementAtEvent(evt);
if (item.length) {
//console.log("onHover",item, evt.type);
//console.log(">data", item[0]._index, data.datasets[0].data[item[0]._index]);
jQuery(".div1").css({"backgroundColor":"yellow","color":"red"});
}
},
scales: {
yAxes: [{
ticks: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Y axis'
},
}],
xAxes: [{
ticks: {
display: false,
},
scaleLabel: {
display: true,
labelString: 'X axis'
},
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
if(tooltipItem.yLabel == 65){
return '';
}else if(tooltipItem.yLabel == 59){
return '';
}else if(tooltipItem.yLabel == 20){
return '';
}else if(tooltipItem.yLabel == 81){
return '';
}
}
}
},
};
var myLineChart = Chart.Line('myChart', {
data: data,
options: option,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>