Highcharts - 在点上显示工具提示而不是鼠标悬停答案

【问题标题】：Highcharts - Show tooltip on points click instead mouseoverHighcharts - 在点上显示工具提示而不是鼠标悬停
【发布时间】：2014-06-13 11:37:54
【问题描述】：

是否可以在单击点而不是鼠标移动时显示工具提示。

我已尝试在 java 脚本警报中显示值，如下所示

plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        alert ('Category: '+ this.category +', value: '+ this.y);
                    }
                }
            }
        }
    }

要求是在点击时显示高图表工具提示。

请帮忙。谢谢！

【问题讨论】：

为什么不接受您的问题中的任何答案？即使您说它有效，您仍然没有单击答案左侧的接受签名。阅读this。关于您的问题-官方 Highcharts API 不支持它。但是，我会尝试使用chart.tooltip.refresh(point)。
检查HERE

标签： highcharts highstock

【解决方案1】：

正如@PawelFus 所说，它不受官方支持，但您可以通过控制工具提示的可见性来捏造它。

~~首先加载图表，隐藏它：~~

       chart: {
            events: {
                load: function(){
                    $('.highcharts-tooltip').hide();
                }
            }
        },

禁用粘性跟踪，鼠标移出隐藏，点击显示：

        plotOptions: {
            series: {
                stickyTracking: false,
                events: {
                    click: function() {
                        $('.highcharts-tooltip').show();
                    },
                    mouseOut: function() {
                        $('.highcharts-tooltip').hide();
                    }
                }
            }
        },

这是一个小提琴example。

第一次尝试仅在 chrome 中有效，这是另一个：

禁用默认工具提示：

tooltip: {
    enabled: false
},

在图表加载事件中，创建自己的：

 chart: {
     events: {
        load: function(){
            this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);                    
         }
     }
 },

在click and mouseout控制它：

plotOptions: {
    series: {
        stickyTracking: false,
        events: {
            click: function(evt) {
                this.chart.myTooltip.refresh(evt.point, evt);
            },
            mouseOut: function() {
                this.chart.myTooltip.hide();
            }                       
        }           
    }
},

我在 IE 和 Chrome 中测试过，我不会再安装 Firefox。

使用新堆栈 sn-p 更新代码 9/7/2017：

$(function () {
        $('#container').highcharts({
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            tooltip: {
                valueSuffix: '°C',
                enabled: false
            },
            chart: {
                events: {
                    load: function(){
                        this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
                    }
                }
            },
            plotOptions: {
                series: {
                    stickyTracking: false,
                    events: {
                        click: function(evt) {
                        		this.chart.myTooltip.options.enabled = true;
                            this.chart.myTooltip.refresh(evt.point, evt);
                        },
                        mouseOut: function() {
                            this.chart.myTooltip.hide();
                            this.chart.myTooltip.options.enabled = false;
                        }                       
                    }
                    
                }
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }]
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

【讨论】：

@AshwinPatil，人们仍然使用 chrome 以外的浏览器 :) 查看更新的答案...
当你有工具提示shared: true时这似乎不起作用，它正在抛出：Uncaught TypeError: Cannot read property 'category' of undefined
@kevinandrada，这是因为 myTooltip.refresh 的第一个参数应该是一个数组。输入 this.chart.myTooltip.refresh([evt.point], evt) 错误就会消失。这将仅显示单击的点，因为它将是数组中提供给函数的唯一点 - 您需要手动获取所有点。
嗨@Mark。该示例（jsfiddle）不再起作用。你知道怎么重新解决吗？
@jbkunst，请参阅上面的新工作示例代码（看起来 Highcharts 内部发生了一些变化）。

【解决方案2】：

为像我一样对useHTML: true 有问题并希望仅在点击而不是悬停时显示工具提示的人添加。

tooltip: {
  useHTML: true
}

这是fiddle。

【讨论】：

此解决方案适用于我，但出于某种原因，当您第一次将鼠标悬停在显示工具提示的任何点时（无需单击）。

【解决方案3】：

只需添加那些与我有相同问题的人（请参阅@kevinandrada 在正确答案后的评论，我无法评论）：如果您在tooltip.shared = true 时致电tooltip.refresh，您将得到一个例外@ 987654323@.

您应该提供一个点数组作为第一个参数：

plotOptions: {
    series: {
        stickyTracking: false,
        events: {
            click: function(evt) {
                var points = this.chart.series.map(function(d) { 
                    return d.searchPoint(evt, true)
                });
                this.chart.myTooltip.refresh(points, evt);
            },
            mouseOut: function() {
                this.chart.myTooltip.hide();
            }                       
        }           
    }
 },

【讨论】：

【解决方案4】：

在 Alexandra Espichán 优秀的小提琴中显示第一个鼠标悬停工具提示的问题可以通过 css 解决，并且通过将他的不可见类替换为以下鼠标悬停事件省略：

.highcharts-tooltip:not(.clone){
    visibility: hidden !important;
}

【讨论】：

【解决方案5】：

这是“无法读取未定义的类别”的修复程序。我只是将悬停的图表点传递给刷新。

point: {
    events: {
        mouseOver: function(evt) {
            var hoveredPoints = a.hoverPoints;
            a.tooltip.refresh(hoveredPoints);   
        },
        mouseOut: function() {
            a.tooltip.hide();
        }                       
    }
}

这里是小提琴示例：http://jsfiddle.net/2swEQ/153/

【讨论】：