我使用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
]
}]
});
但问题是我不想在鼠标上显示工具提示...
是否可以在悬停时禁用工具提示？
答案 0 :(得分：58)
禁用工具提示只会禁用工具提示，但悬停效果仍然存在。要禁用悬停效果，请将以下内容添加到plotOptions：
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
答案 1 :(得分：49)
您需要将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
]
}]
});
答案 2 :(得分：11)
您可能还想要禁用所有鼠标跟踪，包括工具提示和悬停效果：
（复制并粘贴链接）http://api.highcharts.com/highcharts#series。enableMouseTracking
plotOptions: {
series: {
enableMouseTracking: false
}
}
答案 3 :(得分：5)
您只需使用以下内容将其转为：
tooltip: {
enabled: false
},
答案 4 :(得分：3)
plotOptions: {
series: {
states: {
inactive: {
opacity: 1,
},
},
}
}
我这样做是为了在悬停时显示多个折线图。
答案 5 :(得分：2)
您可以通过设置选项
来禁用它tooltip:{
enabled: false
}
答案 6 :(得分：0)
我通常只是禁用CSS中的样式，因此如果需要，我仍然可以访问JS中的悬停事件...
.highcharts-tooltip {
display: none;
}
答案 7 :(得分：0)
根据接受的答案中的说明，您需要设置
tooltip: { enabled: false }
注意-您必须将其指定为Highcharts.Options对象的属性（即图表选项对象，不是系列的属性）。因此，请在传递给Highcharts.Chart对象的JSON中指定它，或者将其指定为明确创建的Highcharts.Options对象的属性，然后再传递给它给你Highcharts.Chart
答案 8 :(得分：0)
问题的标题与禁用悬停有关，因此，如果有人为此目的而在这里发现自己，我将详细介绍@SergeyB的answer。
有一些选项会影响鼠标悬停更改系列样式的方式。根据系列类型，它们各自具有不同的效果。我将在这里讨论线和饼图系列，但是通常，您可以在plotOptions.<seriesType>.states.hover下查看适用于当前悬停的系列的样式，并查看plotOptions.<seriesType>.states.inactive下适用于未悬停的系列的样式（例如plotOptions。 pie.states.hover）。这些选项均不影响工具提示的样式。
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.enabled设置为false。
var chartOptions = {
// ...
chart: {
type: "line",
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
},
},
},
},
}
不幸的是，如果我们将其设置为 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,
},
},
},
},
}
如果您正在使用线或面系列，可能会注意到，只要将鼠标悬停在图表上，即使您未触摸某个系列，最近的系列也会获得悬停样式，其余的将获得无效的样式。这是因为plotOptions.series.stickyTracking在线和面系列中默认为true。如果将plotOptions.series.stickyTracking设置为false，则只有当您将鼠标悬停在一行上时，才会应用悬停和无效样式。
var chartOptions = {
// ...
chart: {
type: "line",
},
plotOptions: {
series: {
stickyTracking: false,
},
},
}
与@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: {...}}
}
}