【问题标题】:Disable hover on HighCharts在 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
               ]
       }]
    });

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

是否可以在悬停时禁用工具提示?

【问题讨论】:

    标签: javascript jquery highcharts


    【解决方案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

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2014-02-15
              • 1970-01-01
              • 2013-01-16
              • 2019-08-28
              • 2019-04-07
              相关资源
              最近更新 更多