在 HighCharts 上禁用悬停
Posted
技术标签:
【中文标题】在 HighCharts 上禁用悬停【英文标题】：Disable hover on HighCharts 【发布时间】：2013-04-20 08:09:49 【问题描述】：我使用 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
]
]
);
但问题是我不想在鼠标悬停时出现工具提示...
是否可以在悬停时禁用工具提示？
【问题讨论】：
【参考方案1】：禁用工具提示只是禁用工具提示，但仍然存在悬停效果。要禁用悬停效果，请将以下内容添加到您的 plotOptions：
plotOptions:
series:
states:
hover:
enabled: false
,
【讨论】：
当我有一个饼图时，这使我的图表在悬停时什么也没有。很好的答案，另一个启用 false 的工具提示仍然使我的图表可以悬停..【参考方案2】：您需要将tooltip 属性设置为false，如下所示：
tooltip: enabled: false ,
jsFiddle here
这是您案例的完整代码：
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
]
]
);
【讨论】：
抱歉，我已经更改了指向 jsFiddle 的链接，因为它是错误的...我有饼图，但此代码似乎无法正常工作 - 请您再看一下？ @Vytalyi 更新，检查我的新 jsFiddle。 请注意您的 jsFiddle 无法正常工作。但是很好的答案。谢谢！ 感谢您告诉我！他们更改了插件的链接 如果我希望在脚本运行开始时启用工具提示，然后稍后使用 javascript 在外部禁用该工具提示怎么办？我该怎么做？【参考方案3】：您也可以选择禁用所有鼠标跟踪，包括工具提示和悬停效果：
（复制粘贴链接）http://api.highcharts.com/highcharts#series.enableMouseTracking
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-enablemousetracking-false/
plotOptions:
series:
enableMouseTracking: false
【讨论】：
谢谢。这似乎是禁用悬停效果的更高效的方法。 谢谢！正是我所寻找的。span> 【参考方案4】：问题的标题是关于禁用悬停，所以如果其他人发现自己在这里是为了这个目的，我会详细说明@SergeyB 的answer。
有几个选项会影响鼠标悬停如何更改系列的样式。根据系列类型，它们各自具有不同的效果。我将在这里讨论线和饼系列，但一般来说，您可以在plotOptions.<seriesType>.states.hover 下查看应用于当前悬停系列的样式，并在plotOptions.<seriesType>.states.inactive 下查看应用于非悬停系列的样式（例如 plotOptions.pie.states.徘徊）。这些选项都不会影响工具提示样式。
plotOptions.series.states.inactive
plotOptions.series.states.inactive 影响应用于当前未悬停的所有系列的样式。为防止它们淡入背景，请将 plotOptions.series.states.inactive.opacity 设置为 1。
var chartOptions =
// ...
plotOptions:
series:
states:
inactive:
opacity: 1,
,
,
,
,
jsFiddle for line
jsFiddle for pie
plotOptions.series.states.hover
plotOptions.series.states.hover 影响应用于悬停在系列上的样式。例如，对于一个线条系列，默认是加粗线条宽度并在最近的点上应用一个光晕。
要禁用当前悬停的 line 系列的任何样式，请将 plotOptions.series.states.hover.enabled 设置为 false。
var chartOptions =
// ...
chart:
type: "line",
,
plotOptions:
series:
states:
hover:
enabled: false,
,
,
,
,
jsFiddle
不幸的是，如果我们将它设置在 pie 系列上，这将使悬停的切片与其余不活动的切片一起淡入背景（参见jsFiddle 的示例）。如果我们想在不影响非活动样式的情况下移除所有悬停样式，我们可以将plotOptions.series.states.hover.halo.size 设置为 0（去除光晕）和 plotOptions.pie.states.hover.brightness 设置为 0（去除增亮效果）。请注意，由于亮度特定于饼系列，它记录在 plotOptions.pie 而不是 plotOptions.series 下（尽管即使我在 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,
,
,
,
,
jsFiddle
plotOptions.series.stickyTracking
如果您使用的是线或区域系列，您可能已经注意到，一旦您将鼠标悬停在图表上，即使您没有触摸系列，最近的系列也会收到悬停样式，而其余的则会收到不活跃的造型。这是因为plotOptions.series.stickyTracking 对于线和面积系列默认为真。如果您将 plotOptions.series.stickyTracking 设置为 false，则仅当您将鼠标悬停在一条线上时才会应用悬停和非活动样式。
var chartOptions =
// ...
chart:
type: "line",
,
plotOptions:
series:
stickyTracking: false,
,
,
jsFiddle
plotOptions.series.enableMouseTracking
作为@ninedozen noted，您可以通过将plotOptions.series.enableMouseTracking 设置为false 来完全禁用所有基于鼠标移动的响应式交互。请注意，除了悬停/非活动样式之外，这还将禁用工具提示。
选项范围
要将这些选项应用于整个图表中的所有系列，请将它们放在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: ...
【讨论】：
这有助于完全消除悬停效果。 我的问题显然是非活动状态，谢谢！【参考方案5】：您可以简单地使用以下命令将它们关闭：
tooltip:
enabled: false
,
【讨论】：
【参考方案6】：plotOptions:
series:
states:
inactive:
opacity: 1,
,
,
我这样做是为了在悬停时显示多个折线图。
【讨论】：
这是唯一对我有帮助的答案【参考方案7】：您可以通过设置选项来禁用它
tooltip:
enabled: false
【讨论】：
【参考方案8】：为了完全关闭图表上的工具提示和悬停效果， 需要关闭工具提示，禁用悬停状态并将非活动数据不透明度设置为100%。
此答案基于以前的答案，并显示了问题的完整解决方案。
这是关闭悬停和工具提示效果的配置：
series:
states:
hover:
enabled: false
,
inactive:
opacity: 1,
,
tooltip:
enabled: false
【讨论】：
【参考方案9】：我通常只是禁用 css 中的样式，因此如果需要我仍然可以访问 JS 中的悬停事件...
.highcharts-tooltip
display: none;
【讨论】：
【参考方案10】：按照接受的答案中的说明，您需要设置
tooltip: enabled: false
注意 - 您必须将其指定为您的 Highcharts.Options 对象的属性（即您的图表选项对象，不是您的系列的属性）。因此，要么在传递给 Highcharts.Chart 对象的 JSON 中指定它，要么将其指定为您显式创建的 Highcharts.Options 对象的属性，然后再将其传递给 @987654326 @
见https://api.highcharts.com/highcharts/tooltip.enabled
【讨论】：
以上是关于在 HighCharts 上禁用悬停的主要内容，如果未能解决你的问题，请参考以下文章
如何在工具提示悬停在点 Highcharts 上动态更改图表标题 .. React JS