问题的标题是关于禁用悬停,所以如果其他人发现自己在这里是为了这个目的,我会详细说明@SergeyB 的答案。
有几个选项会影响鼠标悬停如何更改系列的样式。根据系列类型,它们各自具有不同的效果。我将在这里讨论线和饼系列,但一般来说,您可以在下面plotOptions.<seriesType>.states.hover
查看应用于当前悬停系列plotOptions.<seriesType>.states.inactive
的样式和应用于非悬停系列的样式(例如 plotOptions.pie.states.hover)。这些选项都不会影响工具提示样式。
plotOptions.series.states.inactive
plotOptions.series.states.inactive影响应用于当前未悬停的所有系列的样式。为防止它们淡入背景,请设置plotOptions.series.states.inactive.opacity
为 1。
var chartOptions = {
// ...
plotOptions: {
series: {
states: {
inactive: {
opacity: 1,
},
},
},
},
}
jsFiddle 换行
用于馅饼的 jsFiddle
plotOptions.series.states.hover
plotOptions.series.states.hover影响应用于悬停的系列的样式。例如,对于线系列,默认是加粗线宽并在最近的点上应用光晕。
要禁用当前悬停的线条系列的任何样式,请设置plotOptions.series.states.hover.enabled
为 false。
var chartOptions = {
// ...
chart: {
type: "line",
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
},
},
},
},
}
jsFiddle
不幸的是,如果我们将其设置在饼系列上,这将使悬停的切片与其余的非活动切片一起淡入背景(请参阅此jsFiddle示例)。如果我们想在不影响非活动样式的情况下移除所有悬停样式,我们可以设置plotOptions.series.states.hover.halo.size
为 0(去除光晕)和plotOptions.pie.states.hover.brightness
0(去除增亮效果)。请注意,由于亮度特定于饼系列,它记录在 plotOptions 下。pie而不是 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,
},
},
},
},
}
jsFiddle
plotOptions.series.stickyTracking
如果您使用的是线或区域系列,您可能已经注意到,一旦您将鼠标悬停在图表上,即使您没有触摸系列,最近的系列也会收到悬停样式,其余的将收到非活动样式。这是因为plotOptions.series.stickyTracking对于 line 和 area 系列默认为 true。如果您设置plotOptions.series.stickyTracking
为 false,则只有当您将鼠标悬停在一条线上时,才会应用悬停和非活动样式。
var chartOptions = {
// ...
chart: {
type: "line",
},
plotOptions: {
series: {
stickyTracking: false,
},
},
}
jsFiddle
plotOptions.series.enableMouseTracking
正如@ninedozen 所指出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: {...}}
}
}