嗨我已经在我的图表中添加了一些功能，当点击该点时克隆工具提示并将其显示在屏幕上，直到再次点击该点将其关闭。
现在我要做的是当我将鼠标放在已经被点击的点上时，我不希望从悬停中显示另一个工具提示。基本上它会创建一个副本，而不是当它已经有一个克隆的时候我不希望它显示另一个工具提示。
这是我创建的图表的代码：
/***************************************************************
* 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()
还有更多，如果您有任何想法，请分享。我会想象它将是一个非常简单的单线，但我无法弄明白。提前致谢！
您可以通过在this.series.chart.tooltip.label上隐藏mouseOver并在mouseOut上显示它来实现它。
码：
point: {
events: {
mouseOver: function(event) {
if (jQuery.inArray(event.target.category, chart_1_1_checkx) !== -1) {
this.series.chart.tooltip.label.hide();
}
},
mouseOut: function(event) {
if (jQuery.inArray(event.target.category, chart_1_1_checkx) === -1) {
this.series.chart.tooltip.label.show();
}
}
}
}
演示：