javascript 单击按钮时如何启用或禁用 Highcharts 工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13564532/
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 enable or disable a Highcharts tooltip when a button is clicked?
提问by Younes
This is what I've tried:
这是我尝试过的：
$("#toollip").click(function(){
if(chart.container.tooltip.enabled ){
chart.container.tooltip.enabled = false;
}else{
chart.container.tooltip.enabled = true;
}
});
回答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 - 是否显示工具提示。
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 Praveen N
You can chart.update()in compination with tooltip style property.
您可以chart.update()结合工具提示样式属性。
To Hide Tooltip
隐藏工具提示
chart.update({
tooltip: {
style: {
display: "none",
}
}
});
To show Tooltip
显示工具提示
chart.update({
tooltip: {
style: {
display: "block",
}
}
});
Chek this out
检查这个
回答by Demnogonis
Based on Praveen N's answer you can also enable or disable the tooltip using chart.update()
根据 Praveen N 的回答，您还可以使用启用或禁用工具提示 chart.update()
chart.update({
tooltip: {
enabled: true
}
});
回答by Zaheer Ahmed
Try this (just a demo how u can achieve it):
试试这个（只是一个演示如何实现它）：
tooltip: {
enabled: true,
formatter: function() {
if (status) {
return '<b>' + this.x + '</b><br/>' + this.point.series.name + ': ' + this.y;
} else {
return '';
}
}
}
回答by Antoine Auffray
Stop it from displaying using basic CSS and the HighChart.update method :
使用基本 CSS 和 HighChart.update 方法阻止它显示：
chart.update({
tooltip: {
style: {
display: "none",
}
}
});
This way your chart's tooltip will not appear until you apply CSS to make it show up. Also, I think your example code should work but you maybe have a typo :
这样，在您应用 CSS 使其显示之前，图表的工具提示不会出现。另外，我认为您的示例代码应该可以工作，但您可能有一个错字：
$("#toollip").click(function(){
maybe should be
也许应该是
$("#tooltip").click(function(){
Hope it helps !
希望能帮助到你 ！
回答by Lev
If you write about "Series" point tooltip, you will need this option:
如果你写“系列”点工具提示，你将需要这个选项：
enableMouseTracking: false,
In code:
在代码中：
$(function () {
var Chart = Highcharts.chart('Chart', {
chart: {
type: 'line',
},
title: {
text: Chart,
},
xAxis: {
categories: ['1', '2', '3'],
},
yAxis: {
},
series: [{
name: 'Line',
data: [10, 20, 30,],
enableMouseTracking: false,
},],
});
});
This is official JSFiddle sample.
Also you can remove all marker points from line by using the option:
您也可以使用以下选项从行中删除所有标记点：
marker: {
enabled: false,
},
Other options for markers you can find here.
您可以在此处找到标记的其他选项。
