jQuery 禁用 HighCharts 上的悬停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16231565/
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
Disable hover on HighCharts
提问by Vytalyi
I have building a pie chart using HighCharts library, and here is my chart:
我使用 HighCharts 库构建了一个饼图，这是我的图表：
// http://jsfiddle.net/t2MxW/20890/
var chart = new Highcharts.Chart({
colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
credits: { enabled: false },
chart: {
renderTo: 'container',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
type: 'pie',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: { text: null },
plotOptions: {
pie: {
allowPointSelect: false,
size: '100%',
dataLabels: { enabled: false }
}
},
series: [{
showInLegend: false,
type: 'pie',
name: 'Pie Chart',
data: [
['Mobile', 65], // first half of pie
['Other', 35] // second half of pie
]
}]
});
But the problem is that I don't want appearing tooltip on mouse over...
但问题是我不想在鼠标悬停时出现工具提示......
Is it possible to disable tooltip on hover?
是否可以在悬停时禁用工具提示？
回答by SergeyB
Disabling tooltip just disables the tooltip but the hover effect is still present. To disable hover effect, add the following to your plotOptions:
禁用工具提示只是禁用工具提示，但悬停效果仍然存在。要禁用悬停效果，请将以下内容添加到您的 plotOptions：
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
回答by dsgriffin
You need to set the tooltipattribute to false, like so:
您需要将tooltip属性设置为false，如下所示：
tooltip: { enabled: false },
Here's the full code for your case:
这是您案例的完整代码：
var chart = new Highcharts.Chart({
colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
credits: { enabled: false },
tooltip: { enabled: false },
chart: {
renderTo: 'container',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
type: 'pie',
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: { text: null },
plotOptions: {
pie: {
allowPointSelect: false,
size: '100%',
dataLabels: { enabled: false }
}
},
series: [{
showInLegend: false,
type: 'pie',
name: 'Pie Chart',
data: [
['Mobile', 65], // first half of pie
['Other', 35] // second half of pie
]
}]
});
回答by ninedozen
You might alternatively want to disable all mouse tracking in general, both tooltip and hover effects:
您可能还想禁用所有鼠标跟踪，包括工具提示和悬停效果：
(copy and paste link) http://api.highcharts.com/highcharts#series.enableMouseTracking
（复制并粘贴链接）http://api.highcharts.com/highcharts#series.enableMouseTracking
plotOptions: {
series: {
enableMouseTracking: false
}
}
回答by Galen Long
The title of the question is about disabling hovering, so in case anyone else finds themselves here for that purpose, I'll elaborate on @SergeyB's answer.
问题的标题是关于禁用悬停，因此如果其他人为此目的而来到这里，我将详细说明@SergeyB 的回答。
There are a few options that affect how mouse hovering changes a series' styling. They each have different effects depending on the series type. I'll talk about line and pie series here, but generally, you can look under plotOptions.<seriesType>.states.hoverfor styling applied to the currently hovered series and plotOptions.<seriesType>.states.inactivefor styling applied to the non-hovered series (e.g. plotOptions.pie.states.hover). None of these options affect the tooltip styling.
有几个选项会影响鼠标悬停如何更改系列的样式。它们每个都有不同的效果，具体取决于系列类型。我将在这里讨论线和饼系列，但通常，您可以查看plotOptions.<seriesType>.states.hover应用于当前悬停系列plotOptions.<seriesType>.states.inactive的样式和应用于非悬停系列的样式（例如 plotOptions.pie.states.hover）。这些选项都不会影响工具提示样式。
plotOptions.series.states.inactive
plotOptions.series.states.inactive
plotOptions.series.states.inactiveaffects the styling applied to all series that aren't currently being hovered over. To prevent them from fading into the background, set plotOptions.series.states.inactive.opacityto 1.
plotOptions.series.states.inactive影响应用于当前未悬停的所有系列的样式。为防止它们淡入背景，请设置plotOptions.series.states.inactive.opacity为 1。
var chartOptions = {
// ...
plotOptions: {
series: {
states: {
inactive: {
opacity: 1,
},
},
},
},
}
plotOptions.series.states.hover
plotOptions.series.states.hover
plotOptions.series.states.hoveraffects the styling applied to the series that's being hovered over. For example, for a line series, the default is to thicken the line width and apply a halo to the nearest point.
plotOptions.series.states.hover影响应用于悬停的系列的样式。例如，对于线系列，默认是加粗线宽并对最近的点应用光晕。
To disable any styling of a currently hovered lineseries, set plotOptions.series.states.hover.enabledto false.
要禁用当前悬停的线条系列的任何样式，请设置plotOptions.series.states.hover.enabled为 false。
var chartOptions = {
// ...
chart: {
type: "line",
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
},
},
},
},
}
Unfortunately, if we set this on a pieseries, this will make the hovered slice fade into the background with the rest of the inactive slices (see this jsFiddlefor an example). If we want to remove all hover styling without affecting the inactive styling, we can set plotOptions.series.states.hover.halo.sizeto 0 (which removes the halo) and plotOptions.pie.states.hover.brightnessto 0 (which removes the brightening effect). Note that since brightness is specific to pie series, it's documented under plotOptions.pieinstead of plotOptions.series(though it worked for me even when I added it under plotOptions.series).
不幸的是，如果我们在饼图系列上设置它，这将使悬停的切片与其余的非活动切片一起淡入背景（请参阅此jsFiddle示例）。如果我们想删除所有悬停样式而不影响非活动样式，我们可以设置plotOptions.series.states.hover.halo.size为 0（去除光晕）和plotOptions.pie.states.hover.brightness0（去除增亮效果）。请注意，由于亮度特定于饼图系列，因此它记录在 plotOptions 下。馅饼而不是 plotOptions。系列（尽管它对我有用，即使我在 plotOptions.series 下添加它）。
var chartOptions = {
// ...
chart: {
type: "pie",
},
plotOptions: {
series: {
states: {
hover: {
halo: {
size: 0,
},
// this worked for me even though it's not
// documented under plotOptions.series:
//brightness: 0,
},
},
},
pie: {
states: {
hover: {
brightness: 0,
},
},
},
},
}
plotOptions.series.stickyTracking
plotOptions.series.stickyTracking
If you're using a line or area series, you may have noticed that as soon as you hover over the chart, even if you're not touching a series, the nearest series will receive hover styling and the rest will receive inactive styling. This is because plotOptions.series.stickyTrackingis true by default for line and area series. If you set plotOptions.series.stickyTrackingto false, hover and inactive styling will only be applied while you're hovering over a line.
如果您使用的是线条或区域系列，您可能已经注意到，只要您将鼠标悬停在图表上，即使您没有触摸某个系列，最近的系列也将采用悬停样式，其余系列将采用非活动样式。这是因为plotOptions.series.stickyTracking对于线和区域系列默认为 true。如果您设置plotOptions.series.stickyTracking为 false，则仅当您将鼠标悬停在一行上时才会应用悬停和非活动样式。
var chartOptions = {
// ...
chart: {
type: "line",
},
plotOptions: {
series: {
stickyTracking: false,
},
},
}
plotOptions.series.enableMouseTracking
plotOptions.series.enableMouseTracking
As @ninedozen noted, you can completely disable all responsive interactions based on mouse movement by setting plotOptions.series.enableMouseTrackingto false. Note that this will also disable tooltips in addition to hover/inactive styling.
正如@ninedozen指出的那样，您可以通过设置plotOptions.series.enableMouseTracking为 false来完全禁用所有基于鼠标移动的响应式交互。请注意，除了悬停/非活动样式之外，这还将禁用工具提示。
Options scope
选项范围
To apply these options to all series in the entire chart, place them under plotOptions.series. To apply them only to certain series types (or if the option is specific to a certain series), place them under plotOptions.<seriesType>. To apply them to a specific series, place them inside that series' options.
要将这些选项应用于整个图表中的所有系列，请将它们放在plotOptions.series. 要将它们仅应用于某些系列类型（或者如果该选项特定于某个系列），请将它们放在plotOptions.<seriesType>. 要将它们应用于特定系列，请将它们放在该系列的选项中。
var chartOptions = {
series: [
{
name: "series1",
type: "line",
data: [...],
// these options will only apply to series1, not series2 or series3
states: {...},
},
{
name: "series2",
type: "line"
data: [...],
},
{
name: "series3",
type: "pie"
data: [...],
}
],
plotOptions: {
// these options will apply to all series in the chart
series: {states: {...}},
// these options will only apply to series of type line
// i.e. series1 and series2
line: {states: {...}}
}
}
回答by SteveP
You can simply turn them of using the following:
您可以简单地使用以下方法关闭它们：
tooltip: {
enabled: false
},
回答by Strikers
you can simply disable it by setting the option
您可以通过设置选项简单地禁用它
tooltip:{
enabled: false
}
回答by Ipsita Mallick
plotOptions: {
series: {
states: {
inactive: {
opacity: 1,
},
},
}
}
I did this to display multiple line charts on hover.
我这样做是为了在悬停时显示多个折线图。
回答by Ben Hall
I usually just disable the style in css so I can still access the hover event in JS if needed...
我通常只是禁用 css 中的样式，因此如果需要，我仍然可以访问 JS 中的悬停事件...
.highcharts-tooltip {
display: none;
}
回答by Chris Halcrow
As specified in the accepted answer, you need to set
如接受的答案中所指定，您需要设置
tooltip: { enabled: false }
Note- you must specify this as a property of your Highcharts.Optionsobject (i.e. your chart options object, nota property of your series). So, either specify it in the JSON that you pass into your Highcharts.Chartobject, or specify it as a property of a Highcharts.Optionsobject that you explicitlycreate, before you pass it to you Highcharts.Chart
注意- 您必须将其指定为Highcharts.Options对象的属性（即图表选项对象，而不是系列的属性）。因此，要么在传递给Highcharts.Chart对象的 JSON 中指定它，要么在将其传递给您之前将其指定为Highcharts.Options您显式创建的对象的属性Highcharts.Chart
