logo标签列表

禁用HighCharts上的悬停效果

javascriptjqueryhighcharts
43

我正在使用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
               ]
       }]
    });

但问题是我不想在鼠标悬停时出现工具提示...

有没有可能禁用悬停时的工具提示？

10个回答
86

禁用提示框只会禁用提示框，但是悬停效果仍然存在。要禁用悬停效果，请将以下内容添加到您的plotOptions中：

    plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    },
3
当我有一个饼图时，它在悬停时不显示。另一个工具提示被禁用后，图表仍然可以悬停。 - Lucas Reppe Welander
59
您需要将tooltip属性设置为false，像这样：
tooltip: { enabled: false },

这里是 jsFiddle

以下是完整代码：

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
@Vytalyi 更新了，看看我的新jsFiddle。 - dsgriffin
1
请注意，您的 jsFiddle 无法正常工作。不过回答很好。谢谢！ - Robin Ellerkmann
谢谢你告诉我！他们已经更改了插件的链接。 - dsgriffin
当我想要在脚本运行开始时启用工具提示，然后稍后用JavaScript进行外部禁用时，该怎么办？我该如何做到这一点？ - Aqqqq
35
谢谢。这似乎是禁用悬停效果更高效的方法。 - Chris White
谢谢！正是我所寻找的。 - Asaf Hananel
15

这个问题的标题是关于禁用悬停，所以如果有其他人为此而来到这里，我会详细说明@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 for line

jsFiddle for pie

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

{{链接1:jsFiddle}}

plotOptions.series.stickyTracking

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

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

{{链接1：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: {...}}
    }
}
这有助于完全移除悬停效果。 - Daniel W.
我的问题显然是与非活动状态有关，谢谢！ - kfir124
如何去除悬停工具提示但保持图表可点击？ - Justin Meskan
我发现将不透明度降至约0.7或0.8可以提高可用性。否则淡化太多，因为线条几乎消失了。 - Dean
5

您可以使用以下方法简单地关闭它们：

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

我用这个方法来实现鼠标悬停时显示多条线图。
2
这是唯一一个帮助了我的答案。 - kfir124
3
为了完全关闭图表的工具提示和悬停效果，需要关闭工具提示，禁用悬停状态，并将非活动数据不透明度设置为100％。
此答案基于以前的答案，并展示了问题的完整解决方案。
以下是关闭悬停和工具提示效果的配置：
  series: {
    states: {
      hover: {
        enabled: false
      },
      inactive: {
        opacity: 1,
      }
    }
  },
  tooltip: {
    enabled: false
  }
2

您可以通过设置选项来简单地禁用它。

tooltip:{
   enabled: false
}
1

我通常只是在CSS中禁用样式，这样如果需要的话，我仍然可以访问JS中的hover事件...

.highcharts-tooltip {
    display: none;
}
tooltip: { enabled: false } 在我的代码中（v5）无效，但这个可以，谢谢！ - Anas
0
如已在被接受的回答中指定，您需要设置。
 tooltip: { enabled: false }

注意 - 您必须将此属性指定为您的Highcharts.Options对象的属性（即您的图表选项对象，而不是您系列的属性）。因此，要么在传递到您的Highcharts.Chart对象的JSON中指定它，要么将其指定为您明确创建的Highcharts.Options对象的属性，然后再将其传递给您的Highcharts.Chart

请参见https://api.highcharts.com/highcharts/tooltip.enabled

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接