Highcharts - 显示点击工具提示，而不是鼠标悬停 [英] Highcharts - Show tooltip on points click instead mouseover

问题描述

是否可以使用工具提示点击点而不是鼠标移动。

我曾尝试在java脚本提示中显示值，如下所示：

  plotOptions：{
 series：{
 cursor：'pointer'，
 point：{
 events：{
 click：function（）{
 alert （'Category：'+ this.category +'，value：'+ this.y）; 
} 
} 
} 
} 
} 
  

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

请帮忙。谢谢！

解决方案

正如@PawelFus所述，它没有官方支持，但你可以通过控制tooltip。

首先在图表加载中隐藏它：

  chart：{
 events：{
 load：function（）{
 $（'。highcharts-tooltip'）。hide（）; 
} 
} 
}，
  

禁用粘性追踪，

  plotOptions：{
系列：{
 stickyTracking： false，
 events：{
 click：function（）{
 $（'。highcharts-tooltip'）。show（）; 
}，
 mouseOut：function（）{
 $（'。highcharts-tooltip'）。hide（）; 
} 
} 
} 
}，
  

这是一个小提琴示例。

第一次尝试只在chrome中工作，这里是另一个：

禁用默认工具提示：

  tooltip：{
 enabled：false 
}，
  

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

 图表：{
 events：{
 load： function（）{
 this.myTooltip = new Highcharts.Tooltip（this，this.options.tooltip）; 
} 
} 
}，
  

在click和mouseout控制它：

  plotOptions：{
系列：{
 stickyTracking：false，
 events ：{
 click：function（evt）{
 this.chart.myTooltip.refresh（evt.point，evt）; 
}，
 mouseOut：function（）{
 this.chart.myTooltip.hide（）; 
} 
} 
} 
}，
  

我在IE和Chrome中测试了这一点，我不再安装Firefox。

使用新的堆栈片段更新代码9/7/2017：

$（function（）{$（'＃container'）。}}

< 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>< div id =containerstyle =min-width： $ p $ b $ p
$ b

Is it possible to have tool tip on clicking of points instead of mouse move.

I have tried with showing values in java script alert as below

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

Requirement is to show high chart tool tip on click.

Please help. Thanks!

解决方案

As @PawelFus states, it's not officially supported but you can fudge this in by taking control of the visiblity of the tooltip.

First on chart load, hide it:

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

Disable sticky tracking, and on mouseout hide it, on click show it:

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

Here's a fiddle example.

First attempt only worked in chrome, here's another:

Disable the default tooltip:

tooltip: {
    enabled: false
},

In the chart load event, create your own:

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

In the click and mouseout control it:

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

I tested this in IE and Chrome, I won't install Firefox anymore.

Update to code 9/7/2017 with new stack snippet:

$(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>

这篇关于Highcharts - 显示点击工具提示，而不是鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！