Привет! Я добавил в свой график некоторые функции, которые клонируют всплывающую подсказку при нажатии на точку и оставляют ее отображаемой на экране до повторного нажатия на точку, что отключает ее.
Теперь я пытаюсь навести курсор мыши на точку, которая уже нажата, и не хочу, чтобы при наведении курсора отображалась другая подсказка. По сути, он создает дубликат, и вместо этого я не хочу, чтобы он показывал другую подсказку, когда там уже есть клонированная.
Вот код для диаграммы, которую я создал:
/***************************************************************
* start of chart_1_1
***************************************************************/
chart_1_1_cloneToolTip = null;
chart_1_1_checkx = [];
chart_1_1_cloneFrame = [];
chart_1_1_cloneText = [];
var chart_1_1_Options = {
chart: {
type: 'area'
},
xAxis: {
type: 'datetime'
},
yAxis: [{
reversedStacks: false,
}, {
opposite: true,
min: 0,
labels: {
formatter: function() {
return moment.duration(this.value, 'minutes').format('H [h] m [m]');
}
}
}],
tooltip: {
shared: true,
useHTML: true,
formatter: function () {
var tooltipcontent = '<div id="tooltip_' + this.x + '"><b>' + moment(this.x).format("dddd, D MMMM YYYY") + '</b>';
var tooltipfooter = '';
var mySum = 0;
tooltipcontent += '<table style="width: 100%;">';
var sortedPoints = this.points.sort(function(a, b){
return ((b.y < a.y) ? -1 : ((b.y > a.y) ? 1 : 0));
});
/**
* we have to loop here as we don't yet know how many series we will have
*/
$.each(this.points, function () {
var symbol = '■';
var avg_suffix = '';
if (this.series.name == 'average dwelltime') {
tooltipfooter += '<tr><td><br><span style="color:' + this.point.color + '">' + symbol + '</span> '
+ this.series.name + ':</td><td style="text-align: right;"><br>' + moment.duration(this.y, 'minutes').format('H [h] m [m]') + '</td></tr>';
} else {
tooltipcontent += '<tr><td><span style="color:' + this.point.color + '">' + symbol + '</span> '
+ this.series.name + ':</td><td style="text-align: right;">' + this.y.toLocaleString() + '</td></tr>';
mySum += this.y;
}
});
tooltipcontent += '<tr><td><b>Total:</b></td><td style="text-align: right;"><b>' + mySum.toLocaleString() + '</b><td></tr>';
tooltipcontent += tooltipfooter;
tooltipcontent += '</table></div>';
return tooltipcontent;
}
},
plotOptions: {
line: {
pointPlacement: 'between'
},
area: {
stacking: 'normal',
lineWidth: 1,
marker: {
lineWidth: 1
}
},
column: {
borderWidth: 0,
stacking: 'normal'
},
series: {
cursor: 'pointer',
marker: {
enabled: null,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
point: {
events: {
mouseOver: function (event) {
console.log(event.target.category);
if (jQuery.inArray(event.target.category, chart_1_1_checkx) != -1) {
}
},
click: function (event) {
//check if point was already clicked
var x = chart_1_1_checkx.indexOf(event.point.x);
if ( x >= 0 ) {
//remove tooltip
$(chart_1_1_cloneFrame[x]).remove();
$(chart_1_1_cloneText[x]).remove();
//remove x coordinate and clone from array --> tooltip can be displayed again
chart_1_1_cloneText.splice(x, 1);
chart_1_1_cloneFrame.splice(x, 1);
chart_1_1_checkx.splice(x, 1);
} else {
var chart_1_1_cloneDiv = this.series.chart.tooltip.label.div.cloneNode(true),
chart_1_1_cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
chart_1_1.container.appendChild(chart_1_1_cloneDiv);
chart_1_1.container.firstChild.appendChild(chart_1_1_cloneToolTip);
//save coordinates and tooltip object
chart_1_1_checkx.push(event.point.x);
chart_1_1_cloneFrame.push(chart_1_1_cloneToolTip);
chart_1_1_cloneText.push(chart_1_1_cloneDiv);
}
}
}
}
}
},
legend: {
enabled: true
}
};
chart_1_1_Options.chart.renderTo = 'chart_1_1';
chart_1_1_Options.xAxis.plotBands = weekends;
chart_1_1_Options.chart.zoomType = 'x';
/**
* initialize the chart
*/
var chart_1_1 = new Highcharts.Chart(chart_1_1_Options);
chart_1_1.showLoading();
Это код, на котором я сейчас сосредоточен:
point: {
events: {
mouseOver: function (event) {
console.log(event.target.category);
if (jQuery.inArray(event.target.category, chart_1_1_checkx) != -1) {
}
},
click: function (event) {
//check if point was already clicked
var x = chart_1_1_checkx.indexOf(event.point.x);
if ( x >= 0 ) {
//remove tooltip
$(chart_1_1_cloneFrame[x]).remove();
$(chart_1_1_cloneText[x]).remove();
//remove x coordinate and clone from array --> tooltip can be displayed again
chart_1_1_cloneText.splice(x, 1);
chart_1_1_cloneFrame.splice(x, 1);
chart_1_1_checkx.splice(x, 1);
} else {
var chart_1_1_cloneDiv = this.series.chart.tooltip.label.div.cloneNode(true),
chart_1_1_cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
chart_1_1.container.appendChild(chart_1_1_cloneDiv);
chart_1_1.container.firstChild.appendChild(chart_1_1_cloneToolTip);
//save coordinates and tooltip object
chart_1_1_checkx.push(event.point.x);
chart_1_1_cloneFrame.push(chart_1_1_cloneToolTip);
chart_1_1_cloneText.push(chart_1_1_cloneDiv);
}
}
}
}
Как вы видите, я клонирую всплывающую подсказку при нажатии, и у меня также есть другое событие для mouseOver, где я пытаюсь скрыть всплывающую подсказку, если дубликат уже есть.
Следующий код работает, это проверяет, есть ли клон, и эта часть работает правильно. Все, что мне нужно сделать, это скрыть подсказку
if (jQuery.inArray(event.target.category, chart_1_1_checkx) != -1) {}
Все, что мне нужно, это строка кода в операторе if, который я указал в своем вопросе, который скрывает всплывающую подсказку, когда я наводю на нее курсор. Оператор if в основном говорит: «Здесь уже есть клонированная всплывающая подсказка, так что не пытайтесь показывать другую, когда я наведите на нее курсор» *
Я пробовал следующее, и ничего из этого не работает:
this.series.chart.tooltip.hide()
$(this.series.chart.tooltip).hide()
this.series.chart.tooltip.div.hide()
и многое другое, если у вас есть идеи, пожалуйста, поделитесь. Я представляю, что это будет довольно простой лайнер, но я просто не могу понять это. Заранее спасибо!