您好,我已在图表中添加了一些功能,可在单击该点时克隆该工具提示,并将其显示在屏幕上,直到再次单击该点将其关闭为止。
现在我要做的是,当我将鼠标悬停在已单击的点上时,我不希望从悬停中显示另一个工具提示。基本上,它会创建一个重复项,但我不希望它在已有克隆的工具提示时显示另一个工具提示。
这是我创建的图表的代码:
def Spline(self,crv,ren,iren):
extract = vtk.vtkExtractVOI()
puntosVTK=dental_curve.puntos_vtk(crv)
spline = vtk.vtkSplineWidget()
spline.InitializeHandles(puntosVTK) #insertamos los puntos
spline.SetCurrentRenderer(ren)
spline.SetDefaultRenderer(ren)
spline.SetInputConnection(extract.GetOutputPort())
spline.SetInteractor(iren)
spline.ProjectToPlaneOn()
spline.SetProjectionNormalToXAxes()
spline.On()
return spline
这是我目前关注的代码:
<dependency>
<groupId>org.messaginghub</groupId>
<artifactId>pooled-jms</artifactId>
</dependency>
如您所见,我在单击时克隆了工具提示,还有一个/***************************************************************
* 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);
}
}
}
}
我所需要的只是我在问题中指定的if语句中的一行代码,当我将鼠标悬停在该提示上时,它会隐藏该提示。 if语句基本上是在说“这里已经有一个克隆的工具提示,所以当我将鼠标悬停在上面时,不要打扰显示另一个”。
我尝试了以下方法,但均无效:
mouseOver
以及更多内容,如果您有任何想法,请分享。我想它会是一个非常简单的班轮,但我只是想不通。预先感谢!
答案 0 :(得分:1)
您只需在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();
}
}
}
}
演示: