Highcharts在mouseOver上隐藏工具提示

时间:2019-03-19 09:42:24

标签: javascript highcharts

您好,我已在图表中添加了一些功能,可在单击该点时克隆该工具提示,并将其显示在屏幕上,直到再次单击该点将其关闭为止。

现在我要做的是,当我将鼠标悬停在已单击的点上时,我不希望从悬停中显示另一个工具提示。基本上,它会创建一个重复项,但我不希望它在已有克隆的工具提示时显示另一个工具提示。

这是我创建的图表的代码:

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

以及更多内容,如果您有任何想法,请分享。我想它会是一个非常简单的班轮,但我只是想不通。预先感谢!

1 个答案:

答案 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();
      }
    }
  }
}

演示: