Highcharts 在鼠标悬停时隐藏工具提示

Question

您好，我在图表中添加了一些功能，当单击该点时复制工具提示并将其显示在屏幕上，直到再次单击该点将其关闭。

现在我要做的是，当我将鼠标悬停在已单击的点上时，我不希望悬停时显示另一个工具提示。基本上它会创建一个副本，而我不希望它在那里已经有一个克隆的工具提示时显示另一个工具提示。

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

/***************************************************************
 * 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()

还有更多，如果您有任何想法，请分享。我想它会是一个非常简单的单班轮，但我就是想不通。提前致谢！

Answer 1

您可以通过在mouseOver 上隐藏this.series.chart.tooltip.label 并在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();
      }
    }
  }
}

演示：

• http://jsfiddle.net/BlackLabel/qbh6fp1w