Highcharts-在点上显示工具提示单击鼠标，而不是鼠标悬停

是否可以在点的单击上使用工具提示而不是鼠标移动

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

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

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

---

请帮忙。谢谢

正如@PawelFus所说，它并没有得到官方的支持，但你可以通过控制工具提示的可视性来回避这个问题

首先，在图表加载时，将其隐藏：

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

禁用粘性跟踪，并在鼠标移出时隐藏它，单击“显示它”：

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

这是一把小提琴

第一次尝试仅在chrome中有效，下面是另一次：

禁用默认工具提示：

tooltip: {
    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.refresh(evt.point, evt);
            },
            mouseOut: function() {
                this.chart.myTooltip.hide();
            }                       
        }           
    }
},

我在IE和Chrome上测试过，我不再安装Firefox了

使用新的堆栈片段更新到2017年9月7日的代码：

$（函数（）{
$（“#容器”）。高图({
xAxis：{
类别：[‘一月’、‘二月’、‘三月’、‘四月’、‘五月’、‘六月’，
‘七月’、‘八月’、‘九月’、‘十月’、‘十一月’、‘十二月’]
},
工具提示：{
valueSuffix:“°C”，
已启用：false
},
图表：{
活动：{
加载：函数（）{
this.myTooltip=newhighcharts.Tooltip（this，this.options.Tooltip）；
}
}
},
打印选项：{
系列：{
粘滞跟踪：错误，
活动：{
单击：功能（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；
}                       
}
}
},
系列：[{
名称:"东京",，
数据：[7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]
}]
});
});

---

只需为那些与我有相同问题的人添加（请参阅正确答案后@kevinandrada的评论，我无法评论）：如果调用

tooltip.refresh

当您的

tooltip.shared=true

时，您将得到一个异常

未捕获类型错误：无法读取未定义的属性“category”

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

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

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

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

这里的提琴示例：
为那些像我这样在
useHTML:true
方面有问题的人添加，他们只想在单击时显示工具提示，而不想在悬停时显示工具提示

tooltip: {
  useHTML: true
}

以下是一个。
Alexandra Espichán优秀小提琴中显示的第一个鼠标悬停工具提示的问题可以通过css解决，鼠标悬停事件可以通过将其隐身类替换为：

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

你为什么不接受你问题中的任何答案？即使你说它有效，你仍然没有点击答案左边的接受标志。阅读关于你的问题，官方Highcharts API不支持它。但是，我会尝试使用
chart.tooltip.refresh（point）
。检查@AshwinPatil，人们仍然使用除chrome以外的浏览器：）查看更新的答案…当您共享工具提示
时，这似乎不起作用：true
，它抛出：
未捕获类型错误：无法读取未定义的属性“category”
@kevinandrada，这是因为myTooltip.refresh的第一个参数应该是数组。键入this.chart.myTooltip.refresh（[evt.point]，evt），错误将消失。这将只显示单击的点，因为它将是提供给函数的数组中唯一的点-您需要手动获取所有点。hi@Mark。这个例子（jsfiddle）已经不起作用了。您知道如何重新求解吗？@jbkunst，请参阅上面的新工作示例代码（看起来Highcharts在内部发生了一些变化）。此解决方案对我有效，但由于某些原因，当您第一次将鼠标悬停在工具提示显示的任何点上时（未单击）。