jQuery 如何以编程方式隐藏 highcharts 中的工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17612630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to programatically hide a tooltip in highcharts?
提问by yrkapil
I am trying to implement highcharts in a mobile application, everything works fine but there is one issue in which on changing orientation from potrait to landscape the tooltip shown for any point selected does not hide on orientation change.
我正在尝试在移动应用程序中实现 highcharts，一切正常，但存在一个问题，即在将方向从 potrait 更改为横向时，为选定的任何点显示的工具提示不会在方向更改时隐藏。
Please suggest me how to hide a tooltip programatically in highcharts ..
请建议我如何在 highcharts 中以编程方式隐藏工具提示..
I tried the below code:
我尝试了以下代码：
$('#tankActualUsagechart').highcharts().tooltip.hide();
$('#tankActualUsagechart').highcharts().tooltip.hide();
but this does not hide the marker which i am displaying ...
但这并没有隐藏我正在显示的标记......
If there is a way to hide the marker i am fine with that also ..
如果有办法隐藏标记，我也可以。
Please help me on this issue
请帮助我解决这个问题
回答by vinothini
Please have a look at http://jsfiddle.net/St84H/
请看一下http://jsfiddle.net/St84H/
You can hide tool tip by
您可以通过以下方式隐藏工具提示
tooltip: {
enabled: false
}
回答by RoccoC5
As long as you have a reference to the Highcharts Chart object, you can hide the tooltip like so:
只要您有对 Highcharts Chart 对象的引用，您就可以像这样隐藏工具提示：
// create chart
var myChart = new Highcharts.Chart({ /* snip */ });
// hide tooltip
myChart.tooltip.hide();
回答by Arnab
You have to provide formatter function. The trick is to return false when you do not want to show anything
您必须提供格式化程序功能。诀窍是当您不想显示任何内容时返回 false
Here is a little test
这是一个小测试
HTML page -
HTML 页面 -
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id='toggleTooltip'>Toggle tooltip</button>
JS Code -
JS代码 -
$(function () {
$('#container').highcharts({
title: {
text: 'tooltip enabled is set to false'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
}]
});
$('#toggleTooltip').click(function () {
var tooltipOptions = $('#container').highcharts().tooltip.options;
if ($(this).hasClass('enabled')) {
tooltipOptions.formatter = null;
$(this).removeClass('enabled');
} else {
tooltipOptions.formatter = function () {
return false;
}
$(this).addClass('enabled');
}
});
});
See live Here
在这里看直播
回答by Kirill Ch
I looked through a lot of forums and nowhere I found very easy way to show/hide a Tooltip like tooltip.enable = true/false. The good way I came to is to set tooltip setting through Formatter in the initialization of chart.
我浏览了很多论坛，但没有找到非常简单的方法来显示/隐藏工具提示，例如 tooltip.enable = true/false。我想到的一个好办法是在chart的初始化中通过Formatter设置tooltip设置。
var barsShowen - is a global variable that has a necessary state - true/false - show Tooltip or not.
var barShowen - 是一个具有必要状态的全局变量 - true/false - 是否显示工具提示。
This example will work in my project www.tanks-vs.com after the beginning of Dec 2014. You could see.
这个例子将在我 2014 年 12 月开始后的项目 www.tanks-vs.com 中工作。你可以看到。
tooltip: {
shared: true,
useHTML: true,
formatter: function() {
if (barsShowen) {
var s = '<span><b>' + this.x + '</b></span><table>';
$.each(this.points, function () {
s += '<tr><td align = "left" style = "color:' + this.series.color + ';">' + this.series.name + ': ' +'</td>' +
'<td><b>'+ this.y +'</b></td></tr>' ;
});
return s+'</table>';
} else {
return false;
}
}
回答by Pawe? Fus
You need to set that marker/point default state.
您需要设置该标记/点默认状态。
Something like this:
像这样的东西：
chart.series[0].data[index_of_tooltip_point].setState("");
回答by harsh4u
Try and use below code:
尝试使用以下代码：
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
series: {
events: {
click: function(e) {
enabledTooltip();
}
}
}
},
tooltip: {
crosshairs: [{
dashStyle: "Solid"
}, false],
enabled: false
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
var enabledTooltip = function(){
alert(567);
var options = chart.options;
options.tooltip.enabled = true;
chart = new Highcharts.Chart(options);
};
});
Hope this works for you
希望这对你有用
回答by Alex Levine
This is jenky but served my purposes
这是jenky但符合我的目的
$(document).ready(function(){
$('.highcharts-container text:last').hide()
})
回答by Sai
Try this if you need at run time.
如果您在运行时需要，请尝试此操作。
chart.tooltip.hide();
chart.tooltip.hide();
It worked for me http://forum.highcharts.com/highcharts-usage/tooltip-how-to-show-hide-tooltips-onblur-t5926/
它对我有用 http://forum.highcharts.com/highcharts-usage/tooltip-how-to-show-hide-tooltips-onblur-t5926/
回答by Karine
I use chart.pointer.reset()for removing marker and tooltip during legendItemClickand it works like a charm
我chart.pointer.reset()用于在期间删除标记和工具提示legendItemClick，它就像一个魅力
