Javascript 禁用悬停在高位图表上

我已经使用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
               ]
       }]
    });

但问题是我不想在鼠标上出现工具提示

---

是否可以禁用悬停时的工具提示？

您需要将

工具提示

属性设置为

false

，如下所示：

tooltip: { enabled: false },

---

以下是您案例的完整代码：

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
              ]
      }]
});

---

您只需使用以下方法将其关闭：

tooltip: {
    enabled: false       
},

---

您只需设置该选项即可禁用它

tooltip:{
   enabled: false
}

---

禁用工具提示只会禁用工具提示，但悬停效果仍然存在。要禁用悬停效果，请将以下内容添加到绘图选项中：

    plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    },

---

或者，您可能希望禁用所有鼠标跟踪，包括工具提示和悬停效果：

（复制和粘贴链接）。启用MouseTracking

---

我通常只是禁用css中的样式，以便在需要时仍然可以访问JS中的悬停事件

.highcharts-tooltip {
    display: none;
}

---

如接受答案中所述，您需要设置

 tooltip: { enabled: false }

注意-必须将其指定为

Highcharts.Options

对象的属性（即图表选项对象，而不是系列的属性）。因此，在传递给

Highcharts.Chart

对象的JSON中指定它，或者在传递给

Highcharts.Chart

对象之前，将它指定为显式创建的

Highcharts.Options

对象的属性

---

请参见

问题的标题是关于禁用悬停，因此，如果其他人发现自己在这里，我将详细介绍@SergeyB的

有几个选项会影响鼠标悬停如何更改系列的样式。根据系列类型，它们各自具有不同的效果。我将在这里讨论直线和饼图系列，但通常，您可以在

plotOptions..states.hover

下查看应用于当前悬停系列的样式设置，在

plotOptions..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,
                },
            },
        },
    },
}


不幸的是，如果我们在饼图系列上设置此选项，这将使悬停的切片与其他非活动切片一起淡入背景（请参见此示例）。如果要在不影响非活动样式的情况下删除所有悬停样式，可以将
plotOptions.series.states.hover.halo.size
设置为0（消除光环），将
plotOptions.pie.states.hover.brightness
设置为0（消除亮显效果）。请注意，由于亮度特定于饼图系列，因此它记录在plotOptions.pie下，而不是plotOptions.series下（尽管即使我在plotOptions.series下添加了亮度，它也适用于我）


plotOptions.series.stickyTracking
如果您使用的是直线系列或面积系列，您可能已经注意到，只要您将鼠标悬停在图表上，即使您没有接触到一个系列，最近的系列将收到悬停样式，其余的将收到非活动样式。这是因为对于直线和面积系列，默认情况下为true。如果将
plotOptions.series.stickyTracking
设置为false，则仅当您将鼠标悬停在直线上时，才会应用悬停和非活动样式

var chartOptions = {
    // ...
    chart: {
        type: "line",
    },
    plotOptions: {
        series: {
            stickyTracking: false,
        },
    },
}


plotOptions.series.enableMouseTracking
作为@ninedozen，通过将
plotOptions.series.enableMouseTracking
设置为false，您可以完全禁用基于鼠标移动的所有响应交互。请注意，除悬停/非活动样式外，这还将禁用工具提示

选项范围
要将这些选项应用于整个图表中的所有系列，请将它们放置在
plotOptions.series
下。若要仅将其应用于某些系列类型（或如果选项特定于某个系列），请将其放置在
绘图选项下。
。要将它们应用于特定系列，请将它们放置在该系列的选项中

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: {...}}
    }
}

我这样做是为了在悬停时显示多个折线图。
为了完全关闭图表上的工具提示和悬停效果，
需要关闭工具提示、禁用悬停状态并将非活动数据不透明度设置为100%

此答案基于以前的答案，并显示了问题的完整解决方案

这是关闭悬停和工具提示效果的配置：

  series: {
    states: {
      hover: {
        enabled: false
      },
      inactive: {
        opacity: 1,
      }
    }
  },
  tooltip: {
    enabled: false
  }

抱歉，我更改了我到JSFIDLE的链接，因为它是错误的。。。我有饼图，这段代码似乎不在那里工作-你能再看一次吗？@Vytalyi更新，检查我的新JSFIDLE。请注意你的JSFIDLE不工作。不过答案很好。谢谢谢谢你让我知道！他们已经更改了插件的链接。如果我希望在脚本运行开始时启用工具提示，然后在以后使用javascript从外部禁用工具提示，该怎么办？我该怎么做呢？当我有一张饼图的时候，这使得我的图表没有悬停。回答得很好，另一个启用false的工具提示仍然使我的图表可以悬停..谢谢。这似乎是禁用悬停效果的更有效的方法。谢谢！这正是我想要的。这有助于完全消除悬停效果。我的问题显然是处于非活动状态，谢谢！这是唯一帮助我的答案
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: {...}}
    }
}

plotOptions: {
  series: {
    states: {
      inactive: {
        opacity: 1,
      },
    },
  }
}

  series: {
    states: {
      hover: {
        enabled: false
      },
      inactive: {
        opacity: 1,
      }
    }
  },
  tooltip: {
    enabled: false
  }